html编程背景延伸,CSS重置中的'行高：1'导致HTML背景延伸

我一直在试图弄清楚为什么在我的布局底部有一个薄(可能是1px)的行，并最终在Eric Meyer的重置中找到了body {line-height: 1;}文件。出于某种原因，这个设置导致html元素延伸过我的页脚。CSS重置中的'行高：1'导致HTML背景延伸

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

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

有什么想法发生了什么？如果有另一篇文章解释这一点，请随时链接到它 - 我找不到任何类似的东西。

谢谢！

中的jsfiddle代码包含Eric Meyer的重置外加：

html, body {

background: red;}

#main {

background: gray;}

#main img {

height: 800px;

display: block;}

paragraph paragraph

© 2013

+0

欢迎SO！请在此处发布[简短，自包含且正确](http://sscce.org/)代码示例，而不是链接到外部网站，以最大程度地获得您的问题的答案。 –