html - IE6 + 7 - 双底边距-6ren

html - IE6 + 7 - 双底边距

转载作者：行者123 更新时间：2023-11-28 01:56:12

25

4

我很清楚著名的double-margin error in IE-6 + 7与 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 上，文本下方的空间加倍:

IE-6 Screenshot

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

最佳答案

改变:

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

关于html - IE6 + 7 - 双底边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16866537/

25

4

0

文章推荐： javascript - 使用 AJAX 将表单提交到两个位置

android - Canvas 剪裁矩形 - 包括右/底边？
在 Android 上，有一个代表绘图表面的 Canvas 类。它有一个剪裁矩形。问题 - 矩形的右边界和底边界是包容性的还是排他性的？换句话说 - 如果矩形是 (0, 0)-(10, 10)，Can
ios - 带阴影的 UIView，仅圆顶角和 mask 底边
我正在努力实现只会将顶角圆化并在其周围形成阴影的 View 。整个 View 应在底部被父 View 遮盖，以防止阴影重叠在 subview 之后(阴影偏移应为 (0, 0))。当我使用时:

首页

博学

6Ren·AI

商城

html - IE6 + 7 - 双底边距