文章/答案/技术大牛

发布

社区首页 >问答首页 >IE6 +7-双底边缘

问IE6 +7-双底边缘
EN

Stack Overflow用户

提问于 2013-05-31 21:49:22

回答 1查看 274关注 0票数 2

我很清楚在double-margin error in IE-6 + 7 s中出现了一个著名的float，我也经历了类似的情况，但是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不修复它呢？(怎么才能修好？)

css

internet-explorer

margin

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-06-01 00:33:04

更改：

<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。您可以通过强制字体大小为1 1px来使其工作。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16866537

复制

相似问题

问IE6 +7-双底边缘
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE6 +7-双底边缘EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE6 +7-双底边缘
EN