我如何在IE6中使liteAccordion(jQuery的水平手风琴插件)工作

时间:2011-10-18 20:36:12

标签: jquery internet-explorer jquery-plugins css3 internet-explorer-6

我正在使用this Plugin并进行了一些更改以符合我的要求。现在这在IE6中不起作用。如何使它在IE6和IE8中工作?如何调整CSS以使其工作?

http://nicolahibbert.com/demo/liteAccordion/

1 个答案:

答案 0 :(得分:1)

它在文档中说明了这个插件不支持IE6,所以最简单的选择可能是找到一个在IE6中工作的替代插件。或者当然不是自己支持IE6。

如果您确实需要使用此特定插件支持IE6,那么您需要找出IE6不支持的CSS功能。

查看css file for the accordion on the demo page,其中包括以下内容:

  • >子选择器。
  • :hover选择器。
  • display: inline-block;
  • border-radius

可能还有更多。

其中一些你可以不用(例如border-radius),但大多数肯定会被要求使用。 >子选择器将成为您的最大杀手。悬停也将是一个大问题。

您可以尝试使用后代选择器替换子选择器 - 即用简单空格替换>符号。这在IE6中有效,并且通常提供相同的功能。然而,由于某种原因,他可能会使用>而不是空格,这意味着它很有可能会破坏某些东西。这是值得尝试的,但不要指望它直接起作用。您可能需要做进一步的工作才能恢复正常运行。

要让:hover正常工作,您需要知道在IE6中,:hover仅适用于<a>代码。因此,要修复代码,您需要重写它以使受悬停影响的元素为<a>

如果你想避免改写整个事情,我的建议是使用Javascript hack,例如Dean Edwards' IE7.js。这是一个javascript实用程序,它尝试向旧版本的IE添加功能。这包括对一些CSS选择器的支持。执行类似工作的另一个替代方案是Selectivzr

可以使用whatever:hover javascript hack强制:hover CSS功能在IE6中工作。这是一个简洁的小黑客,它使得悬停在IE6中为任何元素工作,而不仅仅是<a>标记。

将一个或多个这些脚本添加到您的站点可能足以让它使用现有的CSS。我不能保证,但是IE6很难保证很多。

border-radius不是必需的,但如果您希望它也能正常工作,最好的方法就是CSS3Pie。这适用于在旧版本的IE中添加圆角支持。但是,对于你将要使用的所有其他黑客,我建议不要使用它,除非你必须这样做,因为所有的javascript可能会在浏览器中导致性能问题,就像IE6一样老。

希望有所帮助。