Html 如何制作<；a>；环绕一个没有填充的小图像？

我有以下资料：

<a href="#" style="border:solid 1px gray; line-height: 5px;">
    <img src="x.gif" style="border:solid 0px gray;">
</a>

---

假设x.gif的尺寸是5x5像素。如何使超链接紧紧围绕x.gif？现在宽度是正确的，但是x.gif的顶部和底部似乎都有填充。

尝试添加边距：0；填充：0；您的图像。

尝试以下方法：

<a href="#" style="border:solid 1px gray; display: inline-block;">
    <img src="x.gif" style="display: block;">
</a>

---

如果您需要支持IE7，那么您可能必须在IE7特定的样式表中将

内联块

替换为

块

。

这是MSIE特定的行为。它对

标记周围的空格也很敏感

要修复它，您可以删除它周围的任何空白：

---

请注意，为零宽边框指定颜色和样式没有意义，因此我也将其从图像样式中删除。

这在我测试过的最新浏览器（包括IE9）中都适用

<a href="#" style="border: solid 1px gray; line-height: 5px;"><img src="x.gif" style="border: 0;" width="5" height="5"></a>

然而，当它在IE6/7中看起来非常接近时，他们在边界的下角制作了一个奇怪的人工制品。我不得不模仿IE6/7中的外观，用背景色和填充来欺骗边框。我还必须使用zoom:1为A元素赋值，以使其正常工作（并释放一些额外的填充）

---

令人恼火的是，这不适用于“标准”浏览器，因此如果你不能接受这件艺术品，你就必须使用和瞄准具有自己风格的IE低版本。

#babiker，这是因为你提供了border 1px吗？？？我想这是因为border on href，当

有其默认的

显示：inline时，
字体大小决定
的高度。
行高度
或多或少与行间距有关，而不是与行或内联元素的实际渲染高度有关。
<a href="#" style="font-size:0;text-decoration:none;">
    <img src="x.png" style="border:1px red solid;">
</a>

<a href="#" style="font-size:0;text-decoration:none;background-color:red;padding:1px;zoom:1;">
    <img src="x.png" style="border:none">
</a>