jQuery UI Accordion 在 IE8、IE9 和 IE10 中失败

Question

jQuery UI Accordion 的一个非常奇怪的错误....

版本信息

• Internet Explorer 8、9 和 10 --> 打开“兼容性 View ”。
• jQuery 用户界面 1.10.1
• jQuery 核心 1.9.1

问题场景

我有多个垂直堆叠的独立 Accordion 。当我单击标题以折叠或展开顶部的 Accordion 时，下面的元素会上下滑动，就像您希望为出现/消失的内容腾出空间一样。但是，正下方 Accordion 的标题保持悬停在原地，而其他所有内容都向下滑动。看起来真的很糟糕。当您将鼠标光标悬停在这个流氓 float 标题上时，它会弹回到它应该在的位置。

代码

希望我以后可以放一个 jsFiddle，如果/当我的工作解锁网站时(翻白眼)。现在，这里是代码的简化版本:

<script>
    $(document).ready(function ()
    {
        $(".accordion").accordion(
        {
            collapsible: true,
            active: 0,
            heightStyle: 'content',            
            icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }
        });
    });
</script>
<style>
    .whitebackground { background-color: #FFF; }
    .contentDiv { height: 70px; background-color: lightblue; }
</style>
<div>    
    <div class="whitebackground">
        <table>
            <tr>
                <td>
                    <div class="accordion">
                        <h3>Accordion Header 1</h3>
                        <div>
                            <div class="contentDiv">
                                Some content here 1
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <div class="accordion">
                        <h3>Accordion Header 2</h3>
                        <div>
                            <div class="contentDiv">
                                Some content here 2
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

重现Bug

要重现该错误，只需尝试通过单击标题折叠顶部 Accordion ，您将立即看到问题。

我已经缩小范围了...

我已经能够缩小导致此问题的确切问题范围。如果删除 whitebackground CSS 类，问题就会消失。为什么世界上会发生这种情况？你们觉得这像是一个错误吗？

请阅读最后一部分

是的，我需要保持我的 HTML 结构不变。我在这个例子中大大简化了它，同时仍然保留了这个错误。我只想说我确实想保留 TABLE 元素。无需建议删除它。而且我需要让立即包含 TABLE 的 DIV 也能够指定 CSS 背景色。此外，我不能让用户关闭 IE 中的“兼容性 View ”，因为我们的 AD 组策略在访问内部 Web 应用程序时强制为每个人打开它。

有什么想法吗？

Answer 1

这似乎是由应用于 .ui-accordion-header 的 position:relative css 规则引起的。将其注释掉似乎可以解决 IE 兼容模式下的问题。

.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    /*position: relative;*/
    margin-top: 2px;
    padding: .5em .5em .5em .7em;
    min-height: 0; /* support: IE7 */
}

但是，这会导致标题图标显示在错误的位置。你必须调整他们的 CSS 来补偿。也可能有其他副作用。