IE7 CSS issue - why is there white space between my h2 and h4 tags?
I have an unusual CSS issue in IE7. Here's my html and css code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
.generic_panel {background-color:red; padding:15px; display:block; overflow:hidden;}
.generic_panel h4 {background-color:green; margin:0px; display:block; float:left;}
.generic_panel h2 {background-color:blue; margin:0px; display:block; clear:both开发者_StackOverflow; float:none;}
</style>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section id="content">
<section id="payment" class="generic_panel">
<h4><a href="http://mysite.com">Invoice # 000095</a></h4>
<h2>Remaining Invoice Amount: $17.5<br/>
<span>Original Amount: $17.50</span>
</h2>
</section>
</section>
</body>
</html>
When viewed in IE7, there is white space between the h4 and h2 tags. I've been trying to get rid of that white space. I don't understand why the .generic_panel h2 {margin:0px;} and .generic_panel h4 {margin:0px;} properties aren't getting rid of that white space.
What's even weirder is if I delete ANY of padding:15px or display:block or overflow:hidden from
.generic_panel {background-color:red; padding:15px; display:block; overflow:hidden;}
then it gets rid of the white space between h4 and h2. Why would css properties in my .generic_panel influence the spacing between my h4 and h2 tags?
Please help me understand what the $@#%#$%$ is going on....
You can fix it by adding zoom: 1 to .generic_panel h2.
- Your original code with the problem in IE7: http://jsbin.com/evaxi3
- The same code with the fix applied: http://jsbin.com/evaxi3/2
This problem is due to not having hasLayout - adding zoom: 1 provides the element with "layout", and fixes it.
Just to note, browsers specify their own margin and padding values that are considered the default unless you override them with a CSS reset.
Example of a css reset:
* html
{
padding:0;
margin:0;
}
h2, h4
{
margin:20px 5px;
padding: 5px;
}
If you do this, you'll have to specify the padding and margin on every element as the * html resets all the values to 0 (or whatever you set them to).
I have no idea what's going on, it's a pretty strange bug. I have seemed to be able to fix it for you though.
Working for IE7/8/9, Opera, Firefox
.generic_panel {background-color:red; padding:15px; display:block; overflow:hidden;}
.generic_panel h4 {background-color:green; margin:0px; float:left; width:auto;}
.generic_panel h2 {background-color:blue; margin:0px; clear:both; float:left;}
The problem is that float doesn't work quite right in IE7.
This works and looks the same in IE9,8,7 and FF4. I don't have any others to test.
.generic_panel
{
background-color: silver;
padding: 15px;
display: block;
overflow: hidden;
}
.generic_panel h4
{
background-color:white;
margin: 0px;
display:block;
float: left;
clear:right;
}
.generic_panel h2
{
background-color:Gray;
margin: 0px;
display: inline-block;
width:100%;
clear:both;
}
I also changed your colors to save my eyes... ;)
加载中,请稍侯......
精彩评论