Div无缘无故地在高度上有另一个像素

Question

我无法弄清楚firefox和ie9中chrome 2 px高度差的1px高度差异来自哪里？似乎div.entry就是它的来源，但我无法解决它。

http://goo.gl/kM3U3

#middle {width:900px;}
#middle div.homepage img {width:900px;}

Answer 1

似乎是您网站上img标记末尾的空格。

Answer 2

我用这种方法解决了问题：

<div class="homepage" style="line-height:0">
  <img title="Homepage" alt="Homepage" src="/wp-content/uploads/Homepage.jpg">
</div>

问题是您在图片下方有一行，可能是文档来源上的\n或blank space！

要解决此类问题，您可以将line-height设置为0。

Answer 3

更改

#middle div.homepage img {width:900px;}

到

#middle div.homepage img {display: block; width:900px;}

Answer 4

有时像这样的问题与边界有关。 IE，Firefox和Chrome与默认边框有一些细微差别，因此您必须建立一个。 在这种情况下， css-reset.css 设置了一些你不想要的东西。

变化：

line-height: 1;

为：

line-height: 0;

图片下方的额外白线将不再存在，但我不知道这是否会导致您的页面出现其他一些不需要的问题。

Answer 5

可能是每个浏览器中的默认选项会产生轻微的差异。

我从未创建没有Reset CSS样式表的网站。

确切地说，将所有默认值重置为新的公共库，以便今后应用的所有内容在每个浏览器中的行为都相同。