3 solutions for low version ie normal operation HTML5+CSS3 website

Source: Internet
Author: User
Tags unsupported versions

  Now we can choose a lot of browsers, so the browser environment is also a wide range, the same browser also contains a variety of versions, different versions of the rendering methods are also differences, they support the HTML5, CSS3 characteristics are not the same. This situation causes web developers to face a large number of browser types when developing Web sites

If development is based on minimum standards, such as IE6 unsupported features, we don't have to, there is no need to write this article, but I think this is very rare, more development, in the modern browser to use their supported features, and in the early browser to do a certain demotion, which is called "progressive enhancement", is also the focus of this article. In the following ways, I hope that the site can also be in the low version of IE browser to run miraculously better! Htmlshiv.js Remy's Html5shiv creates HTML5 elements (such as main, header, footer, etc.) through JavaScript. The elements created in some way by JavaScript are styleable (styled). We can spend a lot of time thinking about how it works, but who cares? This strategy is still required on all product sites.     Code as follows:<!--[if Lt IE 9]><script src= "Http://cdn.bootcss.com/html5shiv/3.7/html5shiv.js" >< /script><! [Endif]-->selectivizr.js Selectivizr.js is an incredible resource for populating unsupported CSS selectors and attributes, including important last-child. In the most recent redesign, I have embedded SELECTIVIZR and will not miss any details on older IE browsers. Here is my implementation code:   Code as follows:<!--[if LTE IE 8]><script src= "http://cdn.bootcss.com/selectivizr/1.0.2/ Selectivizr.js "></script><! [endif]--> modern projects are absolutely necessary. Loaded only in older versions of IE. In addition, the Modernizr script has added HTML5 browser support Script Html5shiv, we only reference moernizr.js file, IE9 the following IE browser to support HTML5 added semantic tags such as nav, section, article, etc. You can also use CSS to style them. Conditional annotation You must have seen the most earthy situation under this condition. But whether it's ugly or not, the code actually works exactly as expected: The   code is as follows: <! DOCTYPE Html> <!--[If Lt IE 7]> <html class= "IE6" lang= "en" > <! [endif]--> <!--[if IE 7]>    <html class= "IE7" lang= "en" > <! [endif]--> <!--[if IE 8]>    <html class= "IE8" lang= "en" > <! [endif]--> <!--[if IE 9]>    <html class= "IE9" lang= "en" > <! [endif]--> <!--[if (GT IE 9) |! (IE)] ><!--> <html lang= "en" > <!--<! [endif]--> The above method is a function of CSS, to write some of the different versions of IE for the style differences. First of all, to determine which IE version of the user, and then add the version of the class on the label, this can facilitate hack.   Then we can write in the CSS file:   code as follows:. IE6 xxx {}; IE7 xxx {}; This is the most efficient way to do this, and this method does not require or wait for JavaScript, and does not require a heavyweight JavaScript library. Your defined styles class takes effect immediately and does not have a splash screen.   Although IE browsers are catching up with rivals, the new version of IE has changed a lot, and hopes to reshape the network experience with new ie. But in the domestic old version of IE is still relatively popular. The good news is that these resources work well on all modern browsers and are not at a high price!  

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.