IE8，IE9和IE10中的jQuery UI Accordion失败

Question

这里有jQuery UI Accordion的奇怪bug ....

版本信息

• Internet Explorer 8,9和10 - >打开了“兼容性视图”。
• j kueri ui 1.10.1
• jQuery Core 1.9.1

问题场景

我有多个独立的手风琴垂直堆叠。当我单击标题折叠或展开顶部的手风琴时，下面的元素会像您希望为出现/消失的内容腾出空间一样上下滑动。然而，直接在下面的手风琴的标题保持悬停在原位，而其他一切都向下滑动。看起来很糟糕。当您将鼠标光标悬停在此流氓浮动标题上时，它会快速回到本来应该存在的位置。

码

希望我能稍后提出一个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>

重现错误

要重现该错误，只需单击标题即可尝试折叠顶部手风琴，您将立即看到问题。

我把它缩小了......

我已经能够缩小造成这个问题的确切问题。如果删除whitebackground CSS类，问题就会消失。为什么世界会发生这种情况？这对你们来说似乎是一个错误吗？

请阅读最后一部分

是的，我需要保持我的HTML结构。我在这个例子中大大简化了它，同时仍然保持了这个bug。我只想说我确实想要保留TABLE元素。无需建议删除它。我需要让包含TABLE的DIV能够指定CSS背景颜色。此外，我无法让用户关闭IE中的“兼容性视图”，因为我们的AD组策略会在访问内部Web应用时强制所有人使用它。

有任何想法吗？

Answer 1

这似乎是由位置：相对css规则应用于.ui-accordion-header引起的。评论它似乎解决了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来弥补。也可能有其他副作用。