IE中的<div>元素之间存在奇怪的差距，而不是FF或Opera </div>

Question

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

使用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

任何想法？

感谢您的时间。

Answer 1

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

#header img { vertical-align: bottom }

IE中有一个有趣的错误，包括版本7，它会将一些空格（真正的空文本节点）视为真正的文本节点，并将图像对齐，就好像元素中也有文本一样。

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

   #header img { display: block }

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

Answer 2

Windows 7上的IE是IE8

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

抱歉，我无法粘贴图片，但我会尝试描述它： 在图像之后有一个#text元素，由IE7强制进入新行。 如果你改变img上的样式来包括 向左飘浮; 这解决了我的问题。

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

Answer 3

间隙是菜单图像所在文本行的一部分，因为图像是内联元素，因此它放在文本行的基线上。间隙是从文本基线到线条底部边缘的距离，即悬挂字符（如“g”和“j”）所使用的空间。

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

Answer 4

我遇到了这个问题一千次，最后，在修复后使用过于复杂的修复后，答案很简单！ （至少在涉及<img>时。）在其下面产生间隙的div中，添加'overflow：hidden;'它的CSS;当然，你需要设定它的高度。所以，如果你的div是39px高，这将使它保持在39px高，忽略了IE喜欢放在<img>下的额外空白

希望它有所帮助。

Answer 5

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

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

Answer 6

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

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

或者您可以使用IE条件注释来为不同版本的IE加载sepearte样式表。最后我检查过，条件评论被认为是一个更好的解决方案，因为浏览器默认确实提供了一些有用的功能。

Answer 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>

我警告说这很快又脏。但它确实有效。