無標題線高度的Html錨高度問題

試圖遵守unitless line heights我有一個overflow: auto和錨元素的問題。考慮下面這個簡單的頁面：無標題線高度的Html錨高度問題

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
    <head> 
    <title>test</title> 
    </head> 
    <body style="font-family: arial; font-size: 12px; line-height: 1;"> 
    <div id="wrapper" style="overflow: auto; background-color: #FFCCCC;"> 
     <p>Blah blah blah</p> 
     <a href="#" style="text-decoration: none;">Test</a> 
    </div> 
    </body> 
</html>

的font-size: 12px和line-height: 1的組合應該使段落和錨（無填充，邊距和邊框）12個像素的高度。

因此頁面的總高度應爲：4 * 12 = 48像素（2個元素加上段落的2 * 12像素邊距）。然而，幾乎每個瀏覽器都會保留兩個或三個額外的像素來強調錨點（儘管我使用了text-decoration: none）。 Firefox 7，Chrome 14和Opera 11.51都顯示出這種行爲，令人驚訝的是IE9能正常工作:)。

使用各自的開發人員工具欄，可以看到所有瀏覽器都認爲div元素的高度爲48像素，但只有IE認爲錨點高度爲12像素。其他瀏覽器會說14或15像素，導致滾動條出現。

當刪除overflow: auto不是一個選項（在我的情況下div是由框架生成的，有時只包含浮動元素，所以溢出用於擴展div來封裝其子），是否有任何合適的解決方案對此？即比給予定位點font-size: 15px或line-height: 1.2更好。

乾杯， Moolie

來源

2011-10-05 Moolie

這個問題似乎只如果a直接接觸的#wrapper底部的出現。這意味着您可以在3種方式解決問題：

把鏈接到一個段落
集顯示塊的鏈接，並給它一個保證金
設置填充底部在包裝

你必須決定是否發現這些更「乾淨」。

來源

2011-10-05 17:58:08 deviousdodo

設置填充底部似乎是對我最乾淨的解決方案。但它讓你想知道爲什麼這些瀏覽器不能做數學。例如，Firebug能夠確定鏈接的高度是14px。顯然，渲染引擎並不總是使用計算出的兒童高度來確定元素的高度。我猜文字修飾選項並不是唯一改變元素尺寸的選項。 – Moolie

你可能很好的在這裏找到你的答案：http://stackoverflow.com/questions/7665443/text-decoration-being-cut-off-by-overflowhidden-in-certain-browsers/7665854這是非常奇特的有這些2個問題一個接一個發佈得如此之快，這凸顯了瀏覽器引擎工作人員的困難程度。 – deviousdodo

感謝指針draevor，確實奇特！ – Moolie

無標題線高度的Html錨高度問題

回答

相關問題