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

【问题标题】：IE7 CSS issue - why is there white space between my h2 and h4 tags?IE7 CSS 问题 - 为什么我的 h2 和 h4 标签之间有空格？
【发布时间】：2011-05-07 02:08:44
【问题描述】：

我在 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 标签之间的间距？

请帮助我了解 $@#%#$%$ 发生了什么......

【问题讨论】：

标签： css internet-explorer internet-explorer-7

【解决方案1】：

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

您在IE7中出现问题的原始代码：http://jsbin.com/evaxi3
应用了修复的相同代码：http://jsbin.com/evaxi3/2

这个问题是由于没有hasLayout - 添加zoom: 1 为元素提供“布局”，并修复它。

【讨论】：

好吧，因为它修复了 IE(7) 的一个已知行为。您是否阅读了我的答案的 hasLayout 链接？从该文档内部链接如下：satzansatz.de/cssd/acidicfloat.html - 注意兼容的 FF 和 IE 之间的“差异”。在您的情况下，IE7 在您将“布局”应用于元素之前不会按照 CSS 规范运行。

【解决方案2】：

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

css 重置示例：

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

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

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

【讨论】：

【解决方案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;}

【讨论】：

【解决方案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;
    }

我还改变了你的颜色来保护我的眼睛...... ;)

【讨论】：