隐藏元素不会;如果父元素具有特定的显示类型组合，则不能在IE8中正确地重新绘制页面

Hiding an element doesn't redraw page correctly in IE8 if the parent elements have a specific combination of display types

本文关键字：元素 正确地 不能 新绘制 IE8 绘制 组合 如果 类型 隐藏 显示      更新时间：2023-09-26

在IE8中隐藏/显示某些元素时遇到问题。如果具有display:inline-block的元素具有具有display:block的任何子级（包括嵌套的子级），则该元素的任何子代在隐藏/显示时都会出现问题。页面无法正确重新绘制，其他元素的位置也不会更改以反映新隐藏/显示的元素。

显示问题的最小标记如下。在本例中，当您单击"Clickable element"时，正下方的三个div将被隐藏。然而，Footer Div并没有改变位置——留下了很大的差距。如果您执行某些操作来强制重新绘制页面，例如选择页面上的所有文本，则页脚会跳到正确的位置。

在显示元素时也会发生类似的情况。页脚div没有被推到底部，而是被新显示的元素重叠。

<div style="display:inline-block">
    <div>
    <!-- Any number of other HTML elements -->
        <div style="display:block">
            <div class = "clickable" >Clickable element.</div>
            <div class = "toggleable">Hideable element 1.</div>
            <div class = "toggleable">Hideable element 2.</div>
            <div class = "toggleable">Hideable element 3.</div>
        </div>
    </div>
</div>
<div>Footer Div</div>
<script type="text/javascript">
    $('.clickable').click(function(){
        $('.toggleable').toggle();
    });
</script>

我已经尝试分解这个问题很长一段时间了，我几乎可以肯定我已经解决了最小的问题（inline-block元素，然后是block元素，并对子元素执行显示/隐藏）。有人以前遇到过这种情况吗？或者对如何解决这种情况有什么建议吗？

这样就可以了。正如下面的答案所示，内联块在旧的浏览器中不受支持，并且在某些版本的IE8中显示出一些古怪的行为。我记得我前一段时间做的一些事情中的这个修复，但很抱歉，我不能给你一个完整的解释为什么会发生这种情况。无论如何，在您的主div中添加一个float，然后清除页脚，这样就可以了。

<div style="display:inline-block;float:left">
    <div>
    <!-- Any number of other HTML elements -->
        <div class="div-2" style="display:block">
            <div class = "clickable" >Clickable element.</div>
            <div class = "toggleable">Hideable element 1.</div>
            <div class = "toggleable">Hideable element 2.</div>
            <div class = "toggleable">Hideable element 3.</div>
        </div>
    </div>
</div>
<div style="clear:left">Footer Div</div>

在这里似乎工作得很好。。。但请注意，IE8在呈现jquery时存在一些问题，并且旧浏览器版本并不真正支持css属性"inline block"（ie7，不起作用，IE8，我不确定）。尝试将"zoom:1；"修复添加到正在进行内联块的标记的css中。希望这能有所帮助。

相关文章：