IE6 + 7 - 双底边距

Posted 2023-03-06

技术标签:

【中文标题】IE6 + 7 - 双底边距【英文标题】：IE6 + 7 - Double Bottom Margin 【发布时间】：2013-05-27 19:42:27 【问题描述】：

我很清楚与floats 一起出现的著名double-margin error in IE-6 + 7。我遇到了类似的情况，但 IE-6 将顶部导航栏的 下边距 加倍（实际上在任何地方都没有指定下边距。）

我不确定这种现象是否是 IE-6 双页边距错误的一个示例，但通常的修复 (display:inline) 没有任何影响。

这是标记和 CSS：

<!DOCTYPE html>
<html>

<head>

<style type = "text/css">

        body 
            margin: 0px;
        

        .outer-container 
            background-color: #fbfbfb; 
            width: auto; 
            border-bottom:1px solid #ebebeb;
        

        .header 
            width: 90%;
            min-width: 500px;
            margin: auto;
            margin-left: auto;
            margin-right: auto;
            padding-bottom: 0.3em;
        

        .header-left-column 
            text-align: left; 
            padding-top: 0.5em;
            font-size:12pt; 
            padding-left: 2em; 
            width: 70%;
            float: left;
            display: inline;
        

        .header-right-column 
            padding-top: 0.5em;
            text-align: right; 
            font-size:12pt; 
            padding-right: 2em;
            float: right;
            display: inline;
        

</style>

</head>

<body>

<div class = "outer-container">
    <div class = "header">
        <div class = "header-left-column">
            <b>Option 1</b>
        </div>
        <div class = "header-right-column">
            <b>Option 2</b>
        </div>
        <div style = "height:1px; padding-top:0.1em; clear:both"></div>
    </div>

</div>

</body>

</html>

这是一个显示正确渲染的 jsfiddle 链接：http://jsfiddle.net/wQ8GQ/

请注意顶部栏中的文本上方和下方的垂直空间几乎相等。然而，在 IE-6 上，文本下方的空格会加倍：

问题：这是著名的“双倍保证金”错误的一个例子吗？如果是这样，为什么display:inline 不能修复它？（以及如何解决？）

【问题讨论】：

我认为解决此问题的最简单方法是要求所有使用七年浏览器的用户进行升级。顺便说一下，IE 6 已于 2001 年发布。不幸的是，我的很多用户都在第三世界国家，这些国家的 IE-6+7 比例较高其实，你确定吗？ theie7countdown.com ie6countdown.com 。中国人喜欢IE 6，不知道为什么。再次感受到你的痛苦。 【参考方案1】：

变化：

<div style = "height:1px; padding-top:0.1em; clear:both"></div>

为：

<div style = "height:1px; font-size:1px; padding-top:0.1em; clear:both"></div>

否则 IE6 不会考虑 height:1px，因为它“认为”文本不适合 div。您可以通过将 font-size 强制为 1px 来使其工作。

【讨论】：

以上是关于IE6 + 7 - 双底边距的主要内容，如果未能解决你的问题，请参考以下文章