IE 图片间距问题答案

【问题标题】：IE image spacing issueIE 图片间距问题
【发布时间】：2010-11-11 09:54:44
【问题描述】：

我在 div 上方有一个图像，而 IE（7，大概是 6）坚持在两者之间放置一个空格。我怎样才能摆脱那个空间？

<html>
<body>
    <img src="http://www.google.com/intl/en_ALL/images/logo.gif" style="margin: 0; padding: 0;
        border: solid 1px black" />
    <div style="margin: 0; padding: 0; border: solid 1px green;width: 276">
        <a href="#">More...</a>&nbsp;
    </div>
</body>
</html>

【问题讨论】：

标签： css internet-explorer cross-browser

【解决方案1】：

在图像 CSS 中添加“显示：块”。

IMG 默认为 display:inline ，因此您将得到一行仅包含图像的文本及其下方的 div。文本行的上升等于图像的高度，下降等于当前字体的下降（来自图像和 div 之间的空间）。在严格模式下，即使没有空格，您也会下降。

因此，消除间隙的另一种方法是通过指定 line-height:0（在父元素上）将下降设置为零。

【讨论】：

【解决方案2】：

尝试将图像标记和 div 标记放在同一行。奇怪，但这在过去对我有用。

<img src="file.jpg" /><div><p>contents</p></div>

【讨论】：

谢谢，完成了这项工作......我想知道是否有针对此问题的非黑客修复。
我不会真的认为这是“黑客行为”。

【解决方案3】：

把
放在两者之间。 Explorer 以某种方式隐式地在两者之间放置了一个

，看到它未指定。

【讨论】：

但这会强制使用我试图避免的空白。
我的机器上只有 IE6，这把空格去掉了。
只会将您带到下一行。

【解决方案4】：

看看这对你有没有帮助：

http://www.codingforums.com/archive/index.php/t-157146.html

【讨论】：

不要使用“万能复位”方法。相反，请始终使用特定的重置，例如 Eric Meyer 的 Reset.css。