如何在Firefox和IE8中獲得H1內容的相同高度？

我有以下簡單的頁面：如何在Firefox和IE8中獲得H1內容的相同高度？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
     .img {background:green; width:32px; height:32px;} 
     h1.imgHdr  {font-size:18px; padding:0; margin:0; font-weight:normal; color:#1E395B; font-family:Arial;} 
     h1.imgHdr>span {display:block; float:left; margin-right:5px;} 
     h1.imgHdr span.t {margin-top:11px; width:200px;} 
     div.line   {height:1px; margin:0; padding:0; background:#aaa;} 
    </style> 
</head> 
<body> 

<div class="line"></div> 
<h1 class="imgHdr"> 
     <span class="img"></span> 
     <span class="t" style="width:auto">Documents</span> 
     <a style="clear:both;display:block"></a> 
</h1> 
<div class="line"></div> 

</body> 
</html>

在IE8中，我得到我在尋找的行爲。 2灰色的div與綠色正方形齊平。

但在Firefox 3.6.8中，我在底部div行之前獲得了額外的空間像素。我無法弄清楚爲什麼，或者如何改變CSS來使FF和IE對這個標記做同樣的事情。

我認爲它與h1內部的跨度有關。

我非常感謝任何幫助。

即使添加一個鏈接以

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.2/build/cssreset/reset-context-min.css">

後...問題仍然存在。謝謝。

來源

2010-08-23 user169867

我覺得明確設置line-height很有幫助。將line-height設置爲與font-size相同的值時，您會獲得垂直居中的文本，並佔據您期望的高度。我不確定這是否有助於您的具體情況，但請注意一下。我建議在jsFiddle嘗試。

來源

2010-08-23 18:05:57

甚至w/line-height：18px;我有相同的行爲:( – user169867 2010-08-23 18:08:49

使用'line-height'的確可以解決這個問題：http://jsfiddle.net/MMaSn/ – montrealist 2010-08-23 18:11:55

我也在FF3.6.8上，而且在上面的URL中我看起來很好。沒有額外的像素。 – montrealist 2010-08-23 18:12:33

我相信YUI Reset CSS library是爲這個問題而創建的。

來源

2010-08-23 18:01:05

不幸的是，設置元素的默認值似乎並沒有解決這個問題。 – user169867 2010-08-23 18:02:49

如何在Firefox和IE8中獲得H1內容的相同高度？

回答

相關問題