问题
I have the following CSS code
.editable:before {
content: url(../images/icons/icon1.png);
padding-right:5px;
}
this is used in conjunction with the following markup:
<span class="editable"></span>
In every other blessed browser in the world my icon is appearing, but IE8 seems to have a problem with this. Isn't the :before pseudo-element CSS2? isn't content: also a CSS2 command? what gives?
回答1:
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!
回答2:
Actually you should be careful here and read the detail. For full details, see this link - which states
In Windows Internet Explorer 8, as well as later versions of Windows Internet Explorer in IE8 Standards mode, only the one-colon form of this pseudo-element is recognized—that is, :before. Beginning with Windows Internet Explorer 9, the ::before pseudo-element requires two colons, though the one-colon form is still recognized and behaves identically to the two-colon form.
Meaning for browsers <IE9 - you must use :before and for >=IE9 - you must use ::before
回答3:
When using :before and :after, just be careful not to use double colons (::after - will not work, but :after will work). I lost about 20mins for this...
回答4:
This is going off of Pekka's awesome example... My heights on my project was to tall for the row... So I added a padding-bottom: 0px;
Just in case you rain into this....
.icon-spinner:before {
content: '';
padding: 15px;
padding-bottom: 0px;
background: url("css.png") no-repeat left top;
}
来源：https://stackoverflow.com/questions/2546251/how-can-i-get-ie8-to-accept-a-css-before-tag