How to get H1 content the same height in Firefox and in IE8?
I have the following simple page:
<!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="lin开发者_高级运维e"></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>
In IE8 I get the behavior I'm looking for. The 2 grey divs are flush against the green square.
But in Firefox 3.6.8 I get an extra pixel of space before the bottom div line. I can't figure out why, or how to change the CSS to make FF and IE do the same thing for this markup.
I think it has to do with the spans inside of the h1.
I'd greatly appreciate any help.
Even after adding a link to
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.2/build/cssreset/reset-context-min.css">
...the problem persists. Thank you.
I find it helpful to explicitly set the line-height. With the line-height set to the same value as font-size, you get vertically centered text that occupies as much height as you expect. I'm not positive that this helps in your particular case, but give it a shot. I recommend trying it in jsFiddle.
I believe the YUI Reset CSS library was created for this very problem.
加载中,请稍侯......
精彩评论