爲什麼內聯元素的內容區域的高度大於font-size指定的值？

Question

在一個文件，如：

 
    <p class="wrapper"> 
     <span class="ref"> 
     <span class="text">English</span> 
    </p> 

下列規則將應用於：

 
    .wrapper { 
     background:green; 
     position:relative; 
     padding-left:20px; 
     font-family:Times; 
    } 
    .text { 
     line-height:1; 
     background:blue; 
     font-size:80px; 
    } 
    .ref { 
     position:absolute; 
     left:5px; 
     width:10px; 
     height:80px; 
     background:black; 
    } 

在鉻（版本22.0.1229.79）或IE9，包含「英語」跨度元件的背景似乎有一個高度大於字體大小，但在Firefox（13.0.1）中，高度等於字體大小。 （See the output）

有人可以解釋嗎？

我認爲內容區域的高度與font-size指定的值相同。

Answer 1

這裏的顯示渲染文本時提供的各種參考線圖：

正如你可以看到，有很多的選擇。渲染時，Firefox似乎使用與Chrome/IE不同的基準線。