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背景延伸

回答

相關問題