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

Question

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

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

score 2 · Accepted Answer

2

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

于 2012-05-14T22:33:09.423 回答

score 2 · Accepted Answer

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

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

问题是您在图像下方有一条线，可能是文档源上的a\n或 a ！blank space

要解决此类问题，您可以line-height将0.

score 2 · Accepted Answer

改变

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

到

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

score 2 · Accepted Answer

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

改变：

line-height: 1;

到：

line-height: 0;

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

score 1 · Accepted Answer

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

我从不制作没有重置 CSS样式表的网站。

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

5 回答 5