【问题标题】:CSS :before/:after Selectors in IE 6,7IE 6,7 中的 CSS :before/:after 选择器
【发布时间】:2011-06-18 04:45:12
【问题描述】:

我知道 :before/:after 选择器在 IE 6,7 中不可用
http://www.quirksmode.org/css/contents.html

是否有 js hack 可以在 IE 中启用对这些选择器的支持?

【问题讨论】:

  • 与该表所说的相反,IE8 确实支持:before:after。也许它只是不完全正确的支持。

标签: javascript html css css-selectors


【解决方案1】:

在尝试创建支持 IE 6 和 7 的 https://gist.github.com/1133433 时发现此问题。我曾尝试使用 CSS3 灵活框模型,但在使用带框的 CSS3 灵活框时遇到了 web-kit 中的错误-sizing:边框、填充和固定宽度。它打破了默认的框对齐:拉伸(等高)。要么是这样,要么是决定使用表格。

CSS3 Flexible Box 似乎很难控制。如果您想设置固定宽度,并获得 box-align: 拉伸以及设置内边距的好处,那么您就是 SOL。

【讨论】:

    【解决方案2】:

    使用 Jquery 你可以在任何你喜欢的地方加入支持,有点像这个金块

     /* fix top nav ui in ie6*/
    if ($.browser.msie && $.browser.version <= 6 ) {
        $('#topNav ul li a:not(:last)').after("/");
    }
    

    【讨论】:

      【解决方案3】:

      有一个名为 IE7 的 Javascript 解决方案,它修复了常见的 IE 错误:http://code.google.com/p/ie7-js/

      【讨论】:

      • 一些较旧的 IE7.js modular 文件可在 reisio.com/temp/ie7-js 获得,其中包括 ie7-css2-selectors.js
      • 在该项目中,您需要使用 IE8.js 或 IE9.js 来支持 :before:after,因为 Microsoft 将它们添加到 IE8,而不是 IE7。
      【解决方案4】:

      当然是 jQueries beforeafter

      还有什么;)

      【讨论】:

      • 这是最好的方法!为什么我之前没有想到这一点。谢谢!
      【解决方案5】:

      我不知道它的效果如何;但快速搜索发现了一个有希望的结果:

      http://jquery.lukelutman.com/plugins/pseudo/

      CSS2 的 :before 和 :after 伪选择器真的很方便...... 但他们不能在互联网上工作 探险家。不,甚至没有IE7。我打赌 你在想:“但是如果我们使用 尽可能多的专有 Microsoft 功能 尽可能同时, 那会显示他们的!” 你知道吗? 你是绝对正确的。你刚刚 一定会喜欢这个 - * { 行为: 表达(...); } — 可以(更多或 less) 启用 :before 和 :after for IE5.5+

      在 jquery.pseudo.js 中 您的文档,然后您可以执行以下操作:

      p:before, p {
          before: 'foo';
          content: 'foo'; }
      
      p:before, p .before {
          color: blue; }
      

      【讨论】:

      • 您是否注意到该页面上的“更新:2006 年 2 月 6 日”消息?
      • 我做了,但是 IE7 已经存在了很长时间,所以我忽略了页面的年龄。
      猜你喜欢
      • 2011-05-01
      • 2011-08-17
      • 1970-01-01
      • 2015-01-04
      • 2011-10-08
      • 2016-12-25
      • 1970-01-01
      • 2020-11-07
      相关资源
      最近更新 更多