Joh*_*ohn 0 css internet-explorer internet-explorer-7
我在IE7中有一个不寻常的CSS问题.这是我的html和css代码:
<!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; 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>
在IE7中查看时,h4和h2标签之间有空白区域.我一直试图摆脱那个空白区域.我不明白为什么.generic_panel h2 {margin:0px;}和.generic_panel h4 {margin:0px;} 属性没有摆脱那个空白区域.
如果我删除任何的什么是更加古怪的是padding:15px或display:block或overflow:hidden从
.generic_panel {background-color:red; padding:15px; display:block; overflow:hidden;}
然后它摆脱了h4和h2之间的空白区域.为什么css属性会.generic_panel影响我的h4和h2标签之间的间距？
请帮我理解$ @#%#$%$正在发生什么......
您可以通过添加zoom: 1来修复它.generic_panel h2.
这个问题是由于没有hasLayout - 添加zoom: 1为元素提供了"布局",并修复了它.