代码之家 › 专栏 › 技术社区 › Magnar

隐藏元素时IE8错误呈现错误的任何解决方案?

internet-explorer-8 internet-explorer css

Magnar · 技术社区 · 15 年前

Bug:在IE8中使用JavaScript隐藏元素时,页面上仍然可见的其他元素的边距将被忽略。

这个bug是在IE8中引入的,因为它在IE6+7(和其他浏览器)中可以正常工作。

<html>
<head>
    <style>
        #a, #b, #c, #d {background: #ccf; padding: 4px; margin-bottom: 8px;}
    </style>
</head>
<body>
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="d">d</div>
    <script>
        setTimeout(function () {
            document.getElementById("b").style.display = "none";
        }, 1000);
    </script>
</body>
</html>

a 和 c 在普通浏览器中,它们之间的边距为8,但在IE8中,它们之间的边距为0。

移除填充,IE8的行为和正常的一样。
移除超时,IE8的行为与正常情况一样。
边界的行为方式相同。

在过去的10年里,我一直在与IE Bug合作,但这让我很难堪。目前的解决方案是包装div,并将边距应用于外部元素,将其他样式应用于内部元素。但这是可怕的IE6解决方案的一部分。

有更好的解决办法吗?

编辑: 我向IE9团队提交了一张罚单,现在这个bug已经在IE9中修复了。希望他们也能支持IE8。

2 回复 | 直到 14 年前

edl 15 年前

这件事让我很难找到真正的解决办法。为了解决这个问题,你可以把marginBottom重置为8px。显然,设置显示:无删除a的边距。要验证,请尝试:

    setTimeout(function () {
        document.getElementById("b").style.display = "none";
        document.getElementById("a").style.marginBottom="8px";
    }, 1000);

Mads Mogenshøj 15 年前

edl解决方案的一个增强功能是自动选择并应用上一个元素的边距底部。这样您就不必选择(并记住)元素ID和指定的边距。

setTimeout(function () { 
    var e = document.getElementById("b");
    e.style.display = "none";

    var prevSibling = e.previousSibling;
    prevSibling.style.marginBottom = prevSibling.currentStyle.marginBottom;
}, 1000);

您可能需要检查前一个元素是否存在/是否是bug的一部分。

推荐文章

vasilevich · 模拟内联onkeydown事件

7 年前

Jacek Rzadca · 通过vba选择下拉项。无法访问Iframe。

8 年前

Marek Zakrzewski · 背景大小在IE8上不起作用

8 年前

deilkalb · 如何使用jQuery为IE8设置背景图像(使用过滤器属性)?

9 年前

Jebathon · IE8-jquery remove()不适用于第n个元素

9 年前

mentinet · AJAX jQuery在IE8中成功,在IE10/Chrome/FF中失败

9 年前

brainiak4431 · IE8中未正确显示网站菜单

10 年前

Thennarasu · 服务标签在IE8中不工作?

10 年前

Kevin · 使postMessage()和addEventListener()与IE8兼容

10 年前

Bram Vanroy · 使CSS3家谱IE8兼容

10 年前