Home  >  Article  >  Web Front-end  >  3 solutions for normal running of HTML5 CSS3 websites in lower versions of IE_Experience exchange

3 solutions for normal running of HTML5 CSS3 websites in lower versions of IE_Experience exchange

WBOY
WBOYOriginal
2016-05-16 12:03:442294browse

If we follow the lowest standards when developing, for example, if we don’t use any features that IE6 does not support, then there is no need to write this article; but I think this situation is very rare, and more development is done in modern browsers. Use the features they support and perform certain downgrades on early browsers. This is the so-called "progressive enhancement" and is the focus of this article. Through the following method, I hope that the website can miraculously run better on lower versions of IE browsers!
htmlshiv.js
Remy's HTML5shiv uses JavaScript to create HTML5 elements (such as main, header, footer, etc.). Elements created with JavaScript are styleable to some extent. We could spend a lot of time thinking about how this works, but who cares? This strategy is still a must on all product websites.

Copy code The code is as follows:
selectivizr.js
Selectivizr.js is a Incredible resource for populating unsupported CSS selectors and properties, including the important last-child. In a recent redesign, I embedded selectivizr and didn't miss any details on older IE browsers. The following is my implementation code:
Copy code The code is as follows:

An absolute must for modern projects. Only loaded in older versions of IE.
In addition, the HTML5 browser support script html5shiv has been added to the Modernizr script. As long as we quote the Moernizr.js file, IE browsers below IE9 support the semantic tags added by HTML5 such as nav, section, article, etc. You can also use CSS Stylize them.
Conditional Comments
You must have seen the most common situation below. But ugly or not, the fact is that this code works exactly as expected:
Copy code The code is as follows:





The above method is used in css to write some style differences for each version of IE. First determine which version of IE the user is using, and then add the class of that version to the label, which can facilitate hacking.

Then we can write like this in the css file:

Copy code The code is as follows:

.ie6 xxx {};
.ie7 xxx {};

This is the most efficient method currently considered by the editor. This method does not require or wait for JavaScript, and does not require heavyweight JavaScript library. The styles class you define takes effect immediately, and there is no splash screen yet.

Although IE browser is catching up with its competitors, the new version of IE also has very big changes, and it is hoped to use the new IE to reshape the network experience. But the old version of IE is still relatively popular in China. The good news is that these resources work well on all modern browsers and don’t cost much!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn