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

Question

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

使用FF,Opera和Windows 7上的IE(不记得它是什么),页面看起来应该是应该的,但在Windows Vista上使用IE7,我的导航栏与其余部分之间存在差距.坦率地让它看起来很愚蠢的页面,标签页的幻觉丢失了.

我有一个重置样式表来重置所有元素没有填充,边距等和FF,Opera和Windows 7上的IE生成他们应该的页面,它只是IE7(我猜的早期版本的IE) "T.

以下是显示问题的2个屏幕截图,第一个来自Windows 7上的FF/Opera/IE:

这个来自Windows Vista上的IE7:

这里有一个指向实际网站的链接:Figaro's Ristorante

任何人的想法？

谢谢你的时间.

Answer 1

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

#header img { vertical-align: bottom }

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

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

   #header img { display: block }

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

@zombat:XHTML Strict vs Transitional根本不影响IE 7的渲染引擎,无论是将其切换到标准模式.基本上,我不明白这是多么重要.Doctype与CSS没有任何关系. (2认同)

Answer 2

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

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