如何在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内容的相同高度？

回答

相关问题