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

Question

我不知道火狐和 ie9 中铬 1px 2 像素的高度差是从哪里来的？似乎div.entry 是它的来源，但我无法修复它。

http://goo.gl/kM3U3

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

Answer 1

更改

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

自

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

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

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

改变：

line-height: 1;

自：

line-height: 0;

图片下方的额外白线将不再存在，但我不知道这是否会对您的页面造成其他一些不必要的问题。

Answer 4

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

Answer 5

可能是每个浏览器中的默认选项都略有不同。

我从不在没有重置CSS样式表的情况下创建网站。

它正是这样做的，将所有默认值重置为新的公共基础，以便此后应用的所有内容在每个浏览器中的行为都应该相同。