How to Get IE8 to Accept a CSS :Before Tag

How can I get IE8 to accept a CSS :before tag?

Update: I misread the page! IE 8 does support :before with images, it just doesn't when it is in IE7 compatibility mode.

IE8 supports :before, but not and also images as content when not in compatibility mode. Kudos to @toscho for testing!

  • Source

  • Detailed comparison of which browsers can deal with what sort of content

How I love quirksmode.org, which makes dealing with this stuff at least half-way bearable. The guy deserves a medal!

How can I get css pseudo element :checked to work in IE7 + IE8?

Have you tried IE9.js ?

  • http://code.google.com/p/ie7-js/
  • http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html
  • http://ie7-js.googlecode.com/svn/test/index.html
  • http://ie7-js.googlecode.com/svn/test/checked.html

css :before Pseudo-element not displaying background-image with IE8

IE8 has multiple issues with float and specific width/height values on tags. Try adding a "zoom:1" to trigger haslayout and see if that helps.

IE8 :nth-child and :before

You can (ab)use the adjacent sibling combinator (+) to achieve this with CSS that works in IE7/8.

See: http://jsfiddle.net/thirtydot/LvvNL/64/

/* equivalent to li:nth-child(1) */
#nav-primary ul li:first-child a {
border-top: 5px solid red;
}
/* equivalent to li:nth-child(2) */
#nav-primary ul li:first-child + li a {
border-top: 5px solid blue;
}
/* equivalent to li:nth-child(3) */
#nav-primary ul li:first-child + li + li a {
border-top: 5px solid green;
}​

You cannot emulate more complex variations of :nth-child() such as :nth-child(odd) or :nth-child(4n+3) with this method.

:before pseudo element won’t center in IE8 (Internet Explorer 8)

So I found the answer to my own question and it’s this:

Internet Explorer 8 treats the content generated by the :before and :after as outside of the element.

However, all other browsers (except IE7) treat the content generated by the :before and :after pseudo-elements as part of the element.

So I simply had to write:

.ico-fonts:before {
text-align: center~"\9";
}

IE8 z-index on before and after css selectors

This issue appears to be related to how IE handles the z-index stack. Where FF and Chrome treats elements with z-index document-wide, in IE, as you likely know, z-index is based upon the parent's z-index first.

I think the :before content complicates this issue and, despite it having a negative z-index, is it within the parent element. The element its index is being compared with is not the parent div, as it would be in FF or Chrome, but the content inside the div, the p element. The p element is not a block and shares the z-index of the parent div as well, so it cannot be below the :before content.

The solution is to make an inner div, or give the p element relative positioning and styling.

See: http://jsfiddle.net/RRnm8/3/



Related Topics



Leave a reply



Submit