IE6 + 7 - 双底保证金

时间:2013-05-31 21:49:22

标签: html css internet-explorer margin

我很清楚float发生的着名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上, 文本下方的空间加倍:

IE-6 Screenshot

问题:这是着名的“双边距”错误的一个例子吗?如果是这样,为什么display:inline没有解决它? (它如何修复?)

1 个答案:

答案 0 :(得分: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不考虑高度:1px,因为它“认为”文本不适合div。您可以通过将font-size强制为1px来使其工作。