怪之间的差距在IE中的元素，而不是在FF或Opera(Strange gap between

我知道这样的问题必须得到要求所有的时间，但我还没有找到我的问题的解决方案呢。

使用FF，Opera和IE浏览器是在Windows 7（不记得它是什么），页面看起来正是因为它应该，但在Windows Vista上使用IE7，还有我的导航栏的其余部分之间的空隙页面坦率地说使它看起来愚蠢，标签页的错觉丢失。

我有一个复位样式表，可以将所有的元素都没有填充，利润等，以及FF，Opera和IE浏览器在Windows 7上产生的页面，因为他们应该，它只是IE7（我早前猜测IE的版本），唐“T。

以下是2米的屏幕截图示出了问题，从FF /歌剧/ IE第一上视窗7：

这一个是从IE7在Windows Vista上：

替代文字http://img43.imageshack.us/img43/7558/figarosiegap.jpg

这里是有问题的实际网站的链接：费加罗的意大利餐厅

任何想法吗？

谢谢你的时间。

Answer 1:

我碰到的这个问题bazillion倍。添加到您的CSS：

#header img { vertical-align: bottom }

有一个在IE一个有趣的错误直至并包括7的版本，其中它将把一些空白（空文本节点，真的）作为一个真正的文本节点，并调整图像好像有在元素的文字也是如此。

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

   #header img { display: block }

这个CSS是安全添加到您的全局文件，它不会与其他浏览器如何渲染网页干扰。

Answer 2:

上的窗口7的IE是IE8

我已经采取了使用IE7看看它，缺口似乎是因为在“头” DIV的图像。如果你看一下它与像IE开发工具栏的工具，你可以看到页面上的物体周围的边界。

对不起，我不能粘贴图片，但我会尽力来形容它：有是被强制到由IE7新线图像后#text元素。如果你改变在IMG的风格，包括浮动：左; 这解决了这个问题对我来说。

希望这可以帮助！（让我知道如果你需要更多的清晰度）

Answer 3:

该间隙是文本行，其中菜单图像是的一部分，这是因为图像是内嵌元素，所以它放置在文本行的基线。的间隙是从所述文本到线的底部边缘的基线之间的距离，即通过悬挂的字符，如“G”和“J”使用的空间。

简单地增加display:block; 到图像的样式解决了这个问题。原来从一个内联元件的块元件的图像元件，使得它不放置在文本的基础线，但作为一个单独的元件。

Answer 4:

我碰到的这个问题，一万遍，最后，使用修复后过于复杂的修复后，答案很简单！（至少当<img> “。s的参与）在正在生产下它的间隙在div中，添加‘溢出：隐藏;’ 它的CSS; 你将需要设置它的高度，当然。所以，如果你的DIV是39px高，这将保持在39px高，无视多余的空格IE喜欢下把<img>小号

希望能帮助到你。

Answer 5:

有没有什么有用的信息（HTML或图片的工作），在这个问题上。所以，这里的随机猜测。

我已经在那里元素之间的断行或空格会导致元素之间的垂直空间的情况。试着将关闭和打开的标签紧邻对方，看看是否可以解决这个问题。

Answer 6:

不同的浏览器都具有不同的默认边距和填充。在这种情况下，我猜IE7s默认扔你。还有的问题，有两种解。您可以在HTML，身体级别设置自己的margin和padding：

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

或者您可以使用IE条件注释加载不同版本的IE sepearte样式表。上次我检查，有条件的意见被认为是一个更好的解决方案，因为浏览器默认设置提供了一些实用性。

Answer 7:

杰森是正确的，它是在IE中如何处理空白的HTML ...它当作文本节点的错误。虽然我不认为这是唯一的图像。我相信我已经看到了这个div的行为为好。作为一个全球性的变化，你可以尝试采用垂直对齐：底部图像和申报单。虽然我不知道会产生什么样的混乱。

但是，快速和肮脏的解决办法是只删除空白。还挺很烂，但变化的东西是这样的：

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

<div>blorg</div>

为此：

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

/><div>blorg</div>

我警告说，这是快速和肮脏。但是，它的工作原理。

文章来源: Strange gap between

elements in IE, not in FF or Opera