我很清楚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上, 文本下方的空间加倍:
问题:这是着名的“双边距”错误的一个例子吗?如果是这样,为什么display:inline
没有解决它? (它如何修复?)
答案 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来使其工作。