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 回答