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
How to Set CSS Width Equal to Length of Longest Text
Css3 Box Shadow on Top, Left, and Right Only
Smart Way to Add Corner Image to Div Border on All Four Corners
Why Does User Agent Stylesheet Override My Styles
Override Jquery UI Datepicker Div Visible Strangely on First Page Load
Firefox Unexpected Line Break Using Floats & Overflow Hidden
Thymeleaf into <Style>< /Style>
How to Get Div Height 100% Inside Td of 100%
How to Make the Horizontal Scrollbar for a Div Always Appear Fixed on the Bottom of the Page
Sibling Divs Match Height in Container
Why Do Flexbox Item Images Resize Differently According to Their Initial Size
How to Inline Less Stylesheets
Extend Child Div Beyond Container Div
How to Modify the Strongloop's Loopback Explorer CSS
In Less CSS How to Get Less to Watch a Bunch of Files But Compile a Different File When They Change