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

【问题标题】：jQuery UI Accordion fail in IE8, IE9, and IE10jQuery UI Accordion 在 IE8、IE9 和 IE10 中失败
【发布时间】：2013-04-15 21:47:56
【问题描述】：

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

版本信息

Internet Explorer 8、9 和 10 --> 已打开“兼容性视图”。
jQuery UI 1.10.1
jQuery 核心 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 结构不变。我已经为这个例子大大简化了它，同时仍然保持错误。我只想说我确实想保留 TABLE 元素。无需建议删除它。而且我需要让包含 TABLE 的 DIV 也能够指定 CSS 背景颜色。另外，我不能让用户在 IE 中关闭“兼容性视图”，因为我们的 AD 组策略会在访问内部网络应用程序时强制每个人都启用它。

有什么想法吗？

【问题讨论】：

我在 IE9 中没有得到同样的东西，这里是任何有兴趣的人的小提琴：jsfiddle.net/PAjep
啊哈......我刚刚注意到的另一件事。您必须单击按钮才能在 IE 中打开“兼容性视图”。您现在可以重现该问题吗？
你为什么要这么做？您应该指定一个文档类型以将 IE 踢入标准模式
所以不要使用兼容性视图。简单的回答。在标题中指定有效的文档类型和 X-UA-Compatible 元标记以防止它发生。
我不能让用户在 IE 中关闭“兼容性视图”，因为我们的 AD 组策略在访问内部 Web 应用程序时强制每个人都启用它。（这是我无法控制的。）

标签： jquery css jquery-ui internet-explorer jquery-ui-accordion

【解决方案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 来弥补。也可能有其他副作用。

【讨论】：