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

发布于 2024-12-10 15:17:42 字数 286 浏览 0 评论 0原文

我正在使用 此插件 并进行了一些更改以满足我的要求。现在这在 IE6 中不起作用。如何使其在 IE6 和 IE8 中运行?如何调整 CSS 使其正常工作?

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

I am using this Plugin and made some changes to fit to my requirement. Now this does not work in IE6. How to make it work in IE6 and IE8? How to adjust the CSS to make it to work?

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

微暖i 2024-12-17 15:17:42

它在文档中确实声明该插件不支持 IE6,因此最简单的选择可能是找到一个在 IE6 中工作的替代插件。当然,或者自己不支持IE6。

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

查看演示页面上手风琴的 css 文件,其中包括以下内容:

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

以及可能更多。

其中一些你可以不需要(例如border-radius),但其中大多数肯定是工作所必需的。 > 子选择器将是你的大杀手。悬停也将是一个大问题。

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

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

如果你想避免重写整个事情,我的建议是使用 Javascript hack,例如 Dean爱德华兹的 IE7.js。这是一个 JavaScript 实用程序,尝试向旧版本的 IE 添加功能。这包括对某些 CSS 选择器的支持。另一种可以完成类似工作的替代方案是 Selectivzr

通过使用 任何内容,可以强制 :hover CSS 功能在 IE6 中工作:hover javascript hack。这是一个巧妙的小技巧,使悬停在 IE6 中适用于任何元素,而不仅仅是 标签。

将这些脚本中的一个或多个添加到您的站点可能足以使其与现有 CSS 一起使用。我不能保证这一点,但是对于 IE6 来说很难保证太多。

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

希望有帮助。

It does state in the documentation that IE6 is not supported by this plugin, so the easiest option might be to find an alternative plugin which does work in IE6. Or not to support IE6 yourself, of course.

If you really do need to support IE6 with this specific plugin, then you need to find out what CSS features it uses that aren't supported by IE6.

Looking at the css file for the accordion on the demo page, this includes the following:

  • The > child selector.
  • The :hover selector.
  • display: inline-block;
  • border-radius

and possibly more.

Some of this you can do without (border-radius for example), but most of them are definitely going to be required for the thing to work. The > child selector will be the big killer for you. Hover will also be a big issue.

You could try replacing the child selectors with descendant selectors -- ie replace the > symbols with a simple space. This does work in IE6, and often provides the same functionality. However it's likely that he's used the > rather than a space for a reason, which means that there's a good chance that this will break something. It's worth trying, but don't expect it to work straight off the bat. You're likely to need to do further work to get things back up and running.

To get the :hover working, you need to know that in IE6, :hover only works on <a> tags. So to fix the code, you'd need to rewrite it such that the elements that are affected by hovering are <a>.

If you want to avoid rewriting the whole thing, my suggestion would be to use a Javascript hack such as Dean Edwards' IE7.js. This is a javascript utility which attempts to add functionality to older versions of IE. This includes support for some CSS selectors. Another alternative that does a similar job is Selectivzr.

The :hover CSS functionality can be forced to work in IE6 by using the whatever:hover javascript hack. This is a neat little hack which makes hover work in IE6 for any element, not just <a> tags.

Adding one or more of these scripts to your site might be enough to get it working with the existing CSS. I can't guarantee it, but then it's hard to guarantee much with IE6.

The border-radius is non-essential but if you want that to work as well, the best hack for it is CSS3Pie. This works really well for adding rounded corner support in older versions of IE. However, with all the other hacks you'll be using, I would suggest not using it unless you have to, as all that javascript may cause performance problems in a browser as old as IE6.

Hope that helps.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文