Question

我在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之间的空白区域。为什么我的.generic_panel中的css属性会影响我的h4和h2标签之间的间距？

请帮助我了解$ @＃％＃$％$正在进行....

Answer 1

您可以通过将zoom: 1添加到.generic_panel h2来修复此问题。

您在IE7中遇到问题的原始代码：http://jsbin.com/evaxi3
应用修补程序的相同代码：http://jsbin.com/evaxi3/2

此问题是由于没有hasLayout - 添加zoom: 1为元素提供了“布局”，并对其进行了修复。

Answer 2

请注意，浏览器会指定自己的边距和填充值，这些值被视为默认值，除非您使用CSS重置覆盖它们。

css重置示例：

* html
{
    padding:0;
    margin:0;
}

h2, h4
{
    margin:20px 5px;
    padding: 5px;
}

如果你这样做，你必须在每个元素上指定填充和边距，因为* html将所有值重置为0（或者你设置它们的任何值）。

Answer 3

我不知道发生了什么，这是一个非常奇怪的错误。我似乎能够为你解决这个问题。

为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;}

Answer 4

问题是浮动在IE7中不能正常工作。

这在IE9,8,7和FF4中看起来相同。我没有其他人可以测试。

    .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;
    }

我也改变了你的颜色来拯救我的眼睛......;）

IE7 CSS问题 - 为什么我的h2和h4标签之间有空格？

4 个答案: