Question

要查看此手风琴动画错误，请使用Internet Explorer 8（IE8）转至http://hopplayground.com/

点击“Bios”。首次单击菜单项应打开子菜单。但事实并非如此。第二次单击关闭菜单，但留下了伪影。使用其他菜单可以正常工作。

问题：是什么导致了这个故障，有没有办法解决它或解决它？

我正在使用jQuery 1.4.2和jQuery UI 1.8.2。该功能在Firefox和Safari中完美运行。

TTFN 特拉维斯

Answer 1

不确定问题是什么，因此如果解决方法不是解决方案，则该页面适用于IE7，因此您可以将以下元标记添加到文档<head>中：

  <meta http-equiv="X-UA-Compatible" content="IE=7" />

这将迫使IE8进入IE7兼容模式。使用此标记可以减少跨浏览器问题。

Answer 2

以为我会把我的两分钱扔进去。根据mVChr的回答，你可以使用：

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

通过将其设置为edge，它会强制IE使用可用的最新渲染引擎。我有同样的问题，这对我来说是一个修复。

如果您正在寻找更多信息，这家伙网站会更多地讨论它：

Answer 3

您可以为手风琴添加样式，例如： .accordion {display：table} 因为ie有一些问题显示：内联jquery使用...

Answer 4

根据RikawaS的回应......

在您的手风琴标题仅上，放置以下css代码：

.accordionHeader { 显示：表; 宽度：100％; }

如果您发现标题在它们之间悬停时仍然会跳转，请使用纯色而不是使用边距和填充的边框顶部。当然，这仅适用于纯色的设计（边框颜色需要与背景颜色相匹配）。下面是一个例子：

.accordionHeader { border-top：10px solid #FFFFFF; }

这将修复IE8！这花了我一年的时间来搞清楚。

Answer 5

我从另一篇文章中得到了这个：

我遇到了同样的问题。 IE非常挑剔正确的html，并确保在你的手风琴里面，

结构之外什么都没有，例如，你有这个：

<h3>a header</h3>
<div>some content</div>
<h3>another header</h3>
<div>some more content</div>

它会起作用，但这不会：

<h3>a header</h3>
<div>some content</div>
<span>extra stuff</span>
<h3>another header</h3>
<div>some more content</div>

这都将在你调用.accordion（）的任何元素内。