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块级页脚最后一个元素 - 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>

来源

2013-08-24 nicolekanderson

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

首先，我做了一个simplified fiddle与所有不必要的东西，如重置代码，删除。我不喜欢重置代码，因为他们可以在进行研究时采取行动。

无论如何，我注意到，当你进一步减少line-height时，红色像素的数量会增加。所以它与图像下方的下行空间有关。
这意味着如果您将display:block添加到img的样式中，问题将消失。请参阅newer fiddle。

然后你就不用担心其他看似无关的属性了。

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

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

请参阅more updated fiddle。

或者说，在这种情况下，解决办法是让行高为1.2，但你可能有更多的esotericly形的字体相同的问题...

来源

2013-08-24 21:47:11

感谢李斯特先生的回应。你能告诉我如何解决这个问题，如果最后一个元素已经是块级的，比如

好的，行，毕竟行高是有问题的。显然，字体的下行对于行高来说太大了，并且它溢出了行。因此，脱离身体。所以解决方案是隐藏溢出。看我的编辑。 –

我已经突然遇到类似的问题，我正在使用Javascript设置子元素的高度，以准确填充其父元素。当我这样做时，父级的最后一个元素的字体上的下行字符溢出，导致1像素的滚动条。我设法通过在最后一个元素上添加1个像素的填充来解决这个问题。显然下行者可以吃到元素的填充。 – pgraham

最后一个元素显示：内联默认和行高就像它应该做的那样行事。设置图像显示：块;你不会有这个问题。

来源

2013-08-24 21:47:04 Jeffpowrs

感谢您的回复。将img更改为display：block修复了这个例子，但是当页脚是页面上的最后一个元素时，我遇到了同样的问题。我觉得页脚元素是块级的。我做了一个新的页脚jsfiddle作为最后一个元素 - http://jsfiddle.net/DFDj8/6/ – nicolekanderson

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

回答

相关问题