Question

我有以下简单的页面：

    <!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">

......问题仍然存在。谢谢。

Answer 1

我发现明确设置line-height会很有帮助。将line-height设置为与font-size相同的值后，您将获得垂直居中的文本，其占用的高度与预期的一样多。我并不认为这对你的特殊情况有帮助，但要试一试。我建议您在jsFiddle中尝试。

Answer 2

我相信YUI Reset CSS library是针对这个问题创建的。

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

2 个答案: