У меня есть следующая простая страница:
<!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 серых элемента находятся на одном уровне с зеленым квадратом.
Но в 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">
... проблема сохраняется.
Спасибо.