有没有办法欺骗 IE7 使用伪元素 :after 和 :before?

发布于 2024-10-11 02:13:49 字数 187 浏览 6 评论 0原文

我的页面页脚中有一个导航栏,该导航栏已全部设置完毕并可在所有内容中运行,当然,除了 IE7 之外。 我使用 :after 伪元素来放置管道“|”在导航栏中的每个

  • 之后,但在 IE7 中,它不会显示。 这不是什么大事,也没有那么难看,但我似乎找不到任何东西来堵塞它或欺骗 IE7 让它工作。
  • I have a nav bar in my footer of my page which is all set up and working in everything except, of course, in IE7.
    I used the :after pseudo element to place a pipe "|" after each <li> in the nav bar, but in IE7, it doesn't show up.
    It's not a big thing, it's not that ugly, but I can't seem to find anything to cludge it or trick IE7 to make it work.

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

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

    发布评论

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

    评论(4

    黎歌 2024-10-18 02:13:49

    否。

    自 2012 年 1 月 3 日起,此脚本仅支持 IE8 上的 :before 和 :after:http://code.google.com/p/ie7-js/

    截至 2012 年 1 月 3 日,Selectivizr,其中提到 此处 没有 :before 和 :after。

    截至 2012 年 1 月 3 日,这看起来还没有准备好(尽管也许已经准备好了):https://github。 com/kevindees/ie7_pseudo_elements

    我一直在寻找一种方法让这些伪元素在 IE7 上工作,但看起来无法完成。

    No.

    As of 2012-01-03, this script only supports :before and :after on IE8: http://code.google.com/p/ie7-js/

    As of 2012-01-03, Selectivizr, which is mentioned here doesn't have :before and :after.

    As of 2012-01-03, this doesn't look ready (though maybe it is): https://github.com/kevindees/ie7_pseudo_elements

    I've been looking for a while now for a way to get these pseudoelements working on IE7, but looks like it can't be done.

    永言不败 2024-10-18 02:13:49

    就我个人而言,我可能会使用 jQuery 添加 | :before:after。如果你只需要它来解决这个简单的问题,它可能比整个库轻得多(当然,只有当你已经在使用 jQuery 时,这才有意义。

    $('.element-with-after-class').append('<span class="ie-safe-pseudo-after>|</span>');
    

    或者

    $('.element-with-before-class').prepend('<span class="ie-safe-pseudo-before>|</span>');
    

    或者

    $('.element-with-after-class:not(.element-with-after-class:last-child)').append('<span class="ie-safe-pseudo-after>|</span>');
    

    Personally I would probably use jQuery to add a <span>|</span> :before or :after. If you only need it for this simple issue it would probably be a lot more lightweight than entire libraries (of course this only makes sense if you are already using jQuery.

    $('.element-with-after-class').append('<span class="ie-safe-pseudo-after>|</span>');
    

    or

    $('.element-with-before-class').prepend('<span class="ie-safe-pseudo-before>|</span>');
    

    or

    $('.element-with-after-class:not(.element-with-after-class:last-child)').append('<span class="ie-safe-pseudo-after>|</span>');
    
    梦回梦里 2024-10-18 02:13:49

    这是您的 IE7 工作代码:

    HTML

    <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
    </ul>​
    

    CSS

    li {display: inline;}
    li {*zoom: expression( this.runtimeStyle.zoom="1", this.insertBefore( document.createElement("i"), this.firstChild).className="ie-before" );}
    li .ie-before {*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '|');}​
    

    Here's your working IE7 code:

    HTML:

    <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
    </ul>​
    

    CSS:

    li {display: inline;}
    li {*zoom: expression( this.runtimeStyle.zoom="1", this.insertBefore( document.createElement("i"), this.firstChild).className="ie-before" );}
    li .ie-before {*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '|');}​
    
    别忘他 2024-10-18 02:13:49

    我自己没试过。

    但我的书签已经有一段时间了。

    看看:http://forabeautifulweb.com/blog/about/enable_css_pseudo- element_selectors_in_internet_explorer_with_ie-css3.js/

    编辑:

    确保您还阅读了包含一些有用信息的评论(例如 jQuery)

    Haven't tried it myself.

    But I have a bookmark for some time now.

    Check it out: http://forabeautifulweb.com/blog/about/enable_css_pseudo-element_selectors_in_internet_explorer_with_ie-css3.js/

    EDIT:

    Make sure you also read the comments which contains also some useful info (jQuery for example)

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