IE 中 <div> 元素之间的奇怪间隙，而不是 FF 或 Opera答案

【问题标题】：Strange gap between <div> elements in IE, not in FF or OperaIE 中 <div> 元素之间的奇怪间隙，而不是 FF 或 Opera
【发布时间】：2019-04-03 03:59:49
【问题描述】：

我知道这种问题必须一直被问到，但我还没有找到解决问题的方法。

使用 FF、Opera 和 Windows 7 上的 IE（不记得它是什么），页面看起来完全一样，但是在 Windows Vista 上使用 IE7，我的导航栏和坦率地说，页面的其余部分看起来很愚蠢，并且标签页的错觉消失了。

我有一个重置样式表来重置所有元素，使其没有填充、边距等，并且 FF、Opera 和 Windows 7 上的 IE 按应有方式生成页面，它只是 IE7（我猜是 IE 的早期版本) 没有。

这里有 2 个显示问题的屏幕截图，第一个来自 Windows 7 上的 FF/Opera/IE：

这是来自 Windows Vista 上的 IE7：

alt text http://img43.imageshack.us/img43/7558/figarosiegap.jpg

这里是相关网站的链接：Figaro's Ristorante

有什么想法吗？

感谢您的宝贵时间。

【问题讨论】：

非常感谢大家，我试过了 display:block;修复，但这导致标题上方的徽标和电话号码图像出现一些问题，所以我使用了垂直对齐修复，这似乎有效，所以谢谢你，杰森。另外，感谢那些解释为什么会出现问题的人，所以现在我对它有了更好的理解。谢谢大家。
你应该接受正确的答案:) 提示提示

标签： html css internet-explorer

【解决方案1】：

我已经无数次遇到这个问题了。将此添加到您的 CSS：

#header img { vertical-align: bottom }

在 IE 7 及以下版本中存在一个有趣的错误，它会将一些空白（实际上是一个空文本节点）视为真正的文本节点，并将图像对齐，就好像元素中有文本一样。

另一种选择是将图像声明为块级元素：

   #header img { display: block }

此 CSS 可以安全地添加到您的全局文件中，不会干扰其他浏览器呈现页面的方式。

【讨论】：

vertical-align 的值没有错，你只是把它改成一个绕过问题的值...
这不是针对 XHTML Strict 文档的修复吗？这个网站是 XHTML 过渡的。
@zombat：XHTML Strict vs Transitional 根本不会影响 IE 7 的渲染引擎，要么将其切换到标准模式。基本上，我不明白这有什么关系。 Doctype 真的和 CSS 没有任何关系。

【解决方案2】：

Windows 7 上的 IE 是 IE8

我使用 IE7 看过它，差距似乎是因为“标题”div 中的图像。如果您使用 IE Developer 工具栏之类的工具查看它，您可以看到页面上对象周围的边界。

抱歉，我无法粘贴图片，但我会尝试描述一下：图片后面有一个#text 元素，IE7 将其强制换行。如果您将 img 上的样式更改为包含向左飘浮; 这解决了我的问题。

希望这会有所帮助！（如果您需要更清晰的信息，请告诉我）

【讨论】：

【解决方案3】：

间隙是菜单图像所在的文本行的一部分，因为图像是内联元素，所以它被放置在文本行的基线上。间隙是文本基线到行底部边缘的距离，即挂起'g'和'j'等字符所使用的空间。

只需将display:block; 添加到图像的样式即可解决问题。它将图像元素从内联元素转换为块元素，这样它就不会放在文本的基线上，而是作为一个单独的元素。

【讨论】：

【解决方案4】：

我遇到这个问题一千次了，最后，在一次又一次地使用过于复杂的修复之后，答案很简单！（至少在涉及<img> 的情况下。）在下面产生间隙的 div 中，添加“溢出：隐藏；”到它的CSS；当然，您需要设置它的高度。因此，如果您的 div 高 39px，这将保持 39px 高，忽略 IE 喜欢放在<img>s 下的额外空格

希望对你有帮助。

【讨论】：

【解决方案5】：

在这个问题中没有太多有用的信息（html 或图片）。所以，这是一个随机猜测。

我遇到过换行符或元素之间的空格会导致元素之间出现垂直空间的情况。尝试将结束标签和开始标签紧挨着放置，看看是否能解决问题。

【讨论】：

【解决方案6】：

不同的浏览器都有不同的默认边距和填充。在这种情况下，我猜 IE7 的默认设置会让你失望。该问题有两种通用解决方案。您可以在 html 正文级别设置自己的边距和填充：

html, body {
    margin: 0;
    padding: 0;
}

或者您可以使用 IE 条件 cmets 为不同版本的 IE 加载单独的样式表。最后我检查了一下，条件 cmets 被认为是更好的解决方案，因为浏览器默认值确实提供了一些用处。

【讨论】：

【解决方案7】：

Jason 是正确的，它是 IE 如何处理 html 中的空白的错误...将其视为文本节点。虽然我不认为它是图像所独有的。我相信我也看到了 div 的这种行为。作为全局更改，您可以尝试将 vertical-align:bottom 应用于图像和 div。虽然我不知道会产生什么混乱。

但快速而肮脏的解决方法是删除空格。有点烂，但是像这样改变一些东西：

<img src="blah" alt="" width="5" height="5" />

<div>blorg</div>

到这里：

<img src="blah" alt="" width="5" height="5"

/><div>blorg</div>

我警告说这既快又脏。但它有效。

【讨论】：