html - IE 中 元素之间的奇怪差距，而不是 FF 或 Opera

Question

我知道这种问题肯定会被问到，但我还没有找到解决问题的办法。

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

我有一个重置样式表来重置所有元素，使其没有填充、边距等，并且 Windows 7 上的 FF、Opera 和 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 及更高版本中有一个有趣的错误，它会将一些空白(实际上是空文本节点)视为真正的文本节点，并将图像对齐，就好像元素中也有文本一样。

另一种选择是将图像声明为 block 级元素:

   #header img { display: block }

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