Don’t get me wrong, IE does not support CSS3 advanced selectors, including the latest IE8 (see "Browser Support for CSS Selectors" for details), but CSS selectors are indeed very useful. It can greatly simplify our work and improve Our code efficiency makes it easy for us to create highly maintainable pages.
However, IE's support for advanced CSS selectors, especially CSS3 selectors, has prevented us from promoting the application of CSS selectors. However, although we cannot control the market share of browsers, we can improve our work through some technologies. We can also use other technologies to allow IE to support CSS3 selectors in disguise.
Keith Clark, a web development engineer from the UK, developed a JavaScript solution to enable IE to support CSS3 selectors. This script supports various versions from IE5 to IE8.
usage
You just need to download Robert Nyman's DOMAssistant script and ie-css3.js and import them in the head tag of your page, like this:
<head>
<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>
</head>
Supported selectors
Some limitations of ie-css3
How does it work?
ie-css3.js downloads each style file for the page and parses its CSS3 pseudo-selectors. If a selector is found, it is replaced with the CSS class of the same name. For example: div:nth-child(2) will become div._iecss-nth-child-2. Robert Nyman's DOMAssistant is then used to find the DOM node that matches the element's CSS3 selector and then adds the corresponding CSS class to it.
Eventually, the element's style sheet will be replaced by the new version, and then the corresponding style will be added to the corresponding element using CSS3 selectors.
Avoid IE's CSS interpreter
According to the W3C, a browser should ignore CSS rules it doesn't recognize. This presents a problem - we need to take advantage of CSS3 selectors in the stylesheet file, but IE discards them.
To avoid this problem, each style file is downloaded via XMLHttpRequest. This allows the script to bypass the browser's built-in CSS interpreter and be able to read the raw CSS file.
alternative
Obviously this is not a perfect solution. For Ajax websites, it is basically unusable, because changing the DOM after the generated style sheet is applied will not be effective. But in fact we can customize an ie-css3 ourselves. It's just not as smart as this one.