我一直在试图弄清楚为什么我的布局底部有一条细线(可能是 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>© 2013</p>
</footer>
</body>