0

在 IE8 中隐藏/显示某些元素时出现问题。如果一个元素display:inline-block有任何子元素（包括嵌套子元素）display:block，那么该元素的任何子元素在隐藏/显示时都会出现问题。页面未正确重绘，其他元素位置未更改以反映新隐藏/显示的元素。

显示问题的最小标记如下。在示例中，当您单击“可单击元素”时，正下方的三个 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元素，并在子元素上执行显示/隐藏）。有没有人遇到过这个问题 - 或者关于如何解决这个问题的任何建议？

4

2 回答 2

3

这应该可以解决问题。正如下面的答案所述，旧版浏览器不支持 inline-block ，并且在某些版本的 IE8 中显示出一些古怪的行为。我从前一段时间做过的某件事中记住了这个修复，但我很抱歉，我无法就为什么会发生这种情况给你一个完整的解释。无论如何，在你的主 div 中添加一个浮点数，并清除你的页脚，然后手指交叉，它应该可以工作。

<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>
于 2013-02-22T17:48:18.837 回答
1

似乎在这里工作正常......但请注意，IE8 在呈现 jquery 时存在一些问题，并且旧浏览器版本并不真正支持 css 属性“inline-block”（ie7，不起作用，ie8，我是没有把握）。尝试添加“缩放：1；” 修复具有 inline-block 的标签的 css。希望能有所帮助。

于 2013-02-22T17:25:41.117 回答