3

我一直在试图弄清楚为什么我的布局底部有一条细线（可能是 1px），最后body {line-height: 1;}在 Eric Meyer 的重置文件中找到了它。出于某种原因，此设置导致 html 元素刚刚超出我的页脚。

我在一个超级简单的页面上尝试了这个，只有一个背景颜色为灰色的主 div，将 html 背景设置为红色，这样我就可以看到窗口底部的线条。在主 div、p 标签或 img 上使用高度设置，只有当主 div 具有高度设置时，该行才会消失。（我试图使用这些信息来修复我的实际项目，但它似乎在那里不起作用......）

如果你想看看我在说什么，我做了一个简单的 jsfiddle - http://jsfiddle.net/DFDj8/ - 将其更改#main img {height: 800px;}为只是#main {height: 800px;}去掉底部的红线。注释掉line-height重置中的设置也是如此。

对正在发生的事情有任何想法吗？如果有另一篇文章对此进行了解释，请随时链接到它——我找不到类似的东西。

谢谢！

*更新了 jsfiddle，将块级页脚作为最后一个元素 - http://jsfiddle.net/DFDj8/6/

jsfiddle 中的代码包含 Eric Meyer 的重置以及以下内容：

html, body {
    background: red;}
#main {
    background: gray;}
#main img {
    height: 800px;
    display: block;}


<body>
    <div id="main">
            <p>paragraph paragraph</p>
            <img src="http://auntdracula.com/wp-content/uploads/2013/05/Delicious_Steaz_Soda.jpg" />
    </div>
    <footer>
        <p>&copy; 2013</p>
    </footer>
</body>
4

2 回答 2

1

首先，我做了一个简化的小提琴，删除了所有不必要的东西，比如重置代码。我不喜欢重置代码，因为它们会在进行研究时妨碍您。

无论如何，我注意到当你line-height进一步减少时，红色像素的数量会增加。所以它与图像下方下降器的空间有关。
这意味着如果您添加display:block到 img 的样式，问题就会消失。见较新的小提琴。

这样您就不必再担心其他看似无关的属性了。

编辑：如果正文中的最后一个元素有一行文本，也会出错。显然，字体的下降线对于该行高来说太大了，并且溢出了行外。因此，离开了身体。所以解决方案是隐藏该元素的溢出。

body :last-child {overflow-y:hidden}

查看更多更新的小提琴。

或者，在这种情况下，解决方案是将行高保持在 1.2，但是对于更深奥的字体，您可能会遇到同样的问题......

于 2013-08-24T21:47:11.343 回答
0

最后一个元素是 display: inline 默认情况下，并且 line-height 会按应有的方式作用于它。将图像设置为显示：块；你不会有这个问题。

于 2013-08-24T21:47:04.717 回答