Resolution Browser does not support HTML5 and CSS3

The Modernizr plugin can be used to address: "Responsive Web Design" mentions!

Other:

The first method: IE9 the following version of IE will create HTML5 tags, non-ie browser will ignore this code, so there will be no HTTP requests, it will not affect the efficiency of Web page execution.

 <!--[if  lt ie9]><script> (  function   () { if  (! /*  @[email protected]  */ 0) return   var  e = "abbr, article, aside, audio, canvas, DataList, Details, dialog, EventSource , figure, Footer, header, Hgroup, Mark, menu, meter, nav, output, progress, section, time, video. Split (', ' 

Second approach: Introduce Google's Html5shiv package (recommended) on your Web page

<!--[if lt ie9]><script src= "Http://html5shiv.googlecode.com/svn/trunk/html5.js" ></script ><! [endif]-->

However, regardless of which method you use, the CSS for the new tag is initialized. Because HTML5 is represented inline by default, we need to use CSS to manually convert them to block elements for easy layout

/*html5*/article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

But if IE6/7/8 disables the script user, then becomes the non-style "whiteboard" webpage, how should we solve?

We can refer to Facebook's practice of directing users to the "/?_fb_noscript=1" page with the NoScript logo, replacing HTML5 tags with html4 tags, which is lighter than writing a lot of hack to keep compatibility.

<!--[if LTE IE 8]><noscript><style>.html5-wrappers{display:none!important;} </style><div class= "ie-noscript-warning" > your browser disables the script, please <a href= "" > View here </a> to enable the script! or <a href= "/?noscript=1"> continued access to </a>.</div></noscript><![ Endif]-->

Directs the user to open the script, or jump directly to the interface of the HTML4 label design.

Other:

1. Dean Edwards's Ie7.js (and Ie8.js, ie9.js)

This thing is estimated to try to let IE support CSS3 attributes of the originator, is quite powerful, is the performance overhead, to parse a lot of file scripts, to add a lot of elements to the DOM and classname.

2. Aaron Gustafson's Ecsstender

This method supports @font-face, CSS3 selectors, and CSS3 backgrounds and Borders.

3. Drew Diller's Dd_roundies

This is a based on IE VML to achieve some CSS3 effect.

4. Remiz Rahnas's BORDER-RADIUS.HTC

This method uses the HTC file, which is implemented with VML, with the disadvantage that it cannot be automatically adapted to the location and size of the target element, so it cannot be applied to a dynamic scripting environment.

5. Nick Fetchak's IE-CSS3.HTC

For this method, I have already done this in the previous article "Let Ie6/ie7/ie8 browser support CSS3 Properties". I suggest you look at this article, not ie-css3.htc how good this thing is, but the article on the HTC file and the VML prophecy to do some introduction, for you to understand the implementation of IE similar CSS3 effect principle have some understanding.

6. Keith Clark's Ie-css3.js

This is a project similar to Ie7.js, with selectors that can be used with other JavaScript libraries, so it is smaller by itself.

7. Zoltandulac's Csssandpaper

This is a way to implement some CSS3 properties using IE filters.

8. Css3pie's CSS3 PIE.HTC

Support: Border-radius fillet, Box-shadow box shadow, gradient gradient, multiple background images multiple backgrounds.

The following is a brief introduction to the 8th method:

Official website: http://css3pie.com/

How to use:

First step: Download CSS3 pie.htc file

The second step: upload the pie.htc file to your site directory, upload to the directory where you can, as long as you remember this directory.

step three: Create an HTML file, write a CSS3 code, and introduce PIE.HTC, as in the following paragraph:

1. #id  { 
2. border: 1px  solid  #999;  
3. - WEBKIT-BORDER-RADIUS: 10PX;&NBSP,
4. - moz-border-radius: 10px; 
5. BORDER-RADIUS: 10PX; 
6. behavior: url (PATH/TO/PIE.HTC);  
Li class= "alt" style= "margin:0px; padding:0px; List-style-type:none; " >} 

Note: the. htc file path is relative to the path of the HTML file, not to the CSS file.

Some Known issues:

This method is not omnipotent, there are some limitations and areas to be aware of.

1. Z-index Related issues

These CSS3 effects are implemented by using VML, a container element that draws fillets or projections from VML, and then the container element is inserted as the rear sibling node of the target element, if the target element is Position:absolute or position:relative, The Css3-container element will then set the same Z-index value, and in DOM tree, the elements of the sibling are always behind the previous one, so this overrides the overlay and avoids the possibility that other elements are just inserted.

So, the problem comes, if the current element of the position property is static, is also the default property, then the Z-index property is useless, no coverage can be said, so at this time, ie browser CSS3 rendering is not successful. To solve it is also very simple, set the target element position:relative or set the ancestor element position:relative and give a Z-index value (not 1).

2. The problem of a considerable path

The behavior property of IE is relative to the HTML document, not the same as other CSS properties, not relative to the CSS document. This makes it inconvenient to use PIE.HTC files. If the absolute path root directory, the CSS file is not easy to move, if the relative path and HTML document, then the PIE.HTC file in different HTML pages see the reusability greatly reduced. Also, URL property paths, such as those behind Border-image, are not handled well.

3. Problems with abbreviations

Using pie to achieve CSS3 rendering under IE (the same is true for other methods), only in the form of abbreviations, such as rounded corners, we can set Border-top-left-radius to represent the upper left corner, but Pie does not support this type of writing, only the honest abbreviation.

4. Provide the correct Content-type

To let IE browser support HTC file, need a "text/x-component" word of the content-type head, otherwise, will ignore behavior. The vast majority of Web servers provide the correct content-type, but some are problematic.

If you find that the pie method is not valid on your machine, that is, the HTC file means that the PIE.HTC file is invalid, check your server configuration and it may need to be updated to the latest content-type. For example, for Apache, you can do the following processing in the. htaccess file:

1. AddType text/x-component. HTC

However, for some reason, you cannot modify the server configuration (for example, a public host, or a server provided by a space service provider), you can invoke the HTC file indirectly using a PHP file. I just want to show you the code of this PHP file you know what it means, as follows:

1. <? PHP
2. Header (' content-type:text/x-component ');
3. Include (' PIE.HTC ');
4. ?>

Add a Content-type header with the word "text/x-component" to the PHP file and call the PIE.HTC file.

For the PHP file shown above, you can click here: pie.php (right-–[target | link Save as]), or you can create a new PHP file directly, the above two lines of code to copy in. This PHP file is also available in the Wrappers folder of the original packaged resource provided in this article, although the name is in uppercase.

If you use the PHP file above, you need to put pie.php and PIE.HTC in the same folder directory, while the behavior in CSS should be:

Behavior:url (pie.php);

Resolution Browser does not support HTML5 and CSS3