发表新帖
发表新帖

Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?

前端 未结
关注
3 1762
栀梦
栀梦 2020-11-28 12:55

On this MS compatibility table it says, IE9 does not support pseudo-elements ::before and ::after, but when I try it seems it does... see JSBin

相关标签:
3条回答
  • 长发绾君心
    2020-11-28 13:25

    IE 9 supports the notations ::after and ::before (with two colons) in “standards mode”. In “quirks mode”, it does not. This can be tested e.g. as follows:

    <style>
p::after  {  
  content: "***AFTER***";  
} 
</style>
<p>Hello world

    Here the CSS rule is ignored, because IE 9 goes to quirks mode. But if you add the following line at the very start, IE 9 goes to standards mode and the CSS rule takes effect:

    <!doctype html>

    It is common in IE 9 that in quirks mode, new CSS features (most features that are neither in CSS 2.1 or in the IE legacy) are not supported. In quirks mode, IE 9 does not support the old one-colon notations :after and :before either. It supports them (but not the two-colon versions) in “IE 8 mode”, which you can select in developer tools (F12) manually, in the “document mode” menu, or at document level using the tag <meta http-equiv="X-UA-Compatible" content="IE=8">.

    0 讨论(0)
  • 野性不改
    2020-11-28 13:26

    The CSS2 pseudo-elements :before and :after, with the traditional single-colon notation, are supported by IE8 and later. They are not new to CSS3.

    The double-colon notation, on the other hand, is new to CSS3. IE9 does support this new notation for ::before and ::after, and likewise for the CSS1 pseudo-elements ::first-line and ::first-letter. Going forward, however, no new pseudo-element may use the single colon syntax, and browsers (including IE) are expected to support the double colon syntax for all pseudo-elements.

    I have no clue why that table says IE9 doesn't support the new pseudo-element syntax, because it certainly does according to the docs for the individual selectors linked above, and your test case. As well as, of course, this answer.

    0 讨论(0)
  • 情歌与酒
    2020-11-28 13:39

    As quoted from http://www.w3.org/community/webed/wiki/Advanced_CSS_selectors

    CSS3 pseudo-element double colon syntax Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { ... }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.

    0 讨论(0)
 看不清?
提交回复
热议问题