Why is this CSS:before statement not working in IE 8, IE9?
Question
Using a :before CSS to get an image/icon here (see round circle in image below), but in Internet explorer 8+ it is just not showing up.
This is the site: http://www.websiteprofessioneel.nl
Image link below shows right element (it's the icon in the first post header) as circled on this screendump http://tinypic.com/view.php?pic=xxd9f&s=5#.Ul_WajZRoWY
this is the CSS for that:
.welpen h2:before {
content: url("/wp-content/uploads/z-welpen-category-small.png") !important;
}
Anything missing perhaps? All other browsers work fine and as far as I know peudo CSS is totally supported in at least IE9, but it's not working in both IE8, 9 and up.
2 answers
solution1
3 ACCPTED 2013-10-17 12:52:02
IE is Probably Using Quirks Mode
Internet Explorer can run in quirks or standards mode. The purpose of quirks mode was to make the new standards-compliant IEs (8+) able to read and process the code people had previously written for IE7-.
Likely Reason #1: invalid or absent DOCTYPE declaration
Try specifying this on the first line of your HTML document:
<!DOCTYPE html>
Make sure the <html> element is present. Even though HTML5 specification says it's not needed, older IEs (10 and older) tend to enter quirks mode when it's not specified.
Likely reason #2: site fails (X)HTML validation
If this is present, make sure the W3C validator throws no errors as these can also trigger Quirks Mode in IE. Yours has 15 .
Actual reason was more unlikely: deliberately triggering Quirks Mode
After comments discussion, turns out I was right about the quirks mode, but wrong about the reason. Make sure you don't have any meta tags telling IE to run in quirks mode such as this:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
solution2
3 2013-10-17 12:54:48
problem is because of something wrong in doctype, use <!DOCTYPE html> for html5 and to make it working on ie8 use
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
if you don't want html5 then use
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
this will fix the problem i think
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.