Do not get it wrong. IE does not support CSS3 advanced selectors, including the latest IE8 (for details, see CSS selector browser support), but CSS selectors are indeed very useful, it can greatly simplify our work, improve our code efficiency, and make it easy for us to create highly maintainability pages.
However, the support of IE for advanced CSS selectors, especially CSS3 selectors, keeps us from applying CSS selectors. However, although we cannot influence the market share of browsers, we can improve our work through some technologies. We can also use other technologies to enable 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 the CSS3 selector. This script supports 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 tab of your page, as shown below:
<Head>
<Script type = "text/javascript" src = "DOMAssistantCompressed-2.7.4.js"> </script>
<Script type = "text/javascript" src = "ie-css3.js"> </script>
</Head>
Supported Selector
Some limitations of ie-css3
How does it work?
The ie-css3.js downloads every style file on the page and parses its CSS3 pseudo selector. If a selector is found, it is replaced with a CSS class with the same name. For example: div: nth-child (2) will become div. _ iecss-nth-child-2. Then, Robert Nyman's DOMAssistant is used to find the DOM node that matches the element CSS3 selector and then add the corresponding CSS class to it.
In the end, the style table of the element will be replaced by the new version, and then add the corresponding style to the corresponding element using the CSS3 selector.
Avoid CSS interpreter of IE
According to W3C rules, a browser should ignore CSS rules that it does not know. This leads to a problem-we need to use the CSS3 selector in the style sheet file, but IE will discard them.
To avoid this problem, each style file is downloaded through XMLHttpRequest. This allows the script to bypass the built-in CSS interpreter of the browser and read the original CSS file.
Alternative
Obviously, this is not a perfect solution. For Ajax websites, it is basically useless, because it will not be effective if the DOM is changed after the generated style sheet is applied. But in fact we can customize a ie-css3 by ourselves. It's just not as intelligent as it is.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
