Detailed explanation on the issue of compatibility of old browsers with HTML5 and CSS3

The following editor will bring you an article about the issue of compatibility of old browsers with HTML5 and CSS3. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look

1. Let old browsers support HTML5

HTML5 can do many things for us, the most delicious one is semantics For the application of tags, if you have already used it on Chrome or other browsers that support HTML5, then this article must be useful to you, because now you can also use HTML5 on IE.
The first method: Use Google’s html5shiv package (recommended)

First of all, you have to quote the following html5.js file from Google. The benefits will not be mentioned:

<!--[if IE]>   
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> 
< ![endif]-->

• 
  

Copy the above code to the head part, remember it must be the head part (because IE must This element is known before element parsing, so this js file cannot be called in other locations, otherwise it will be invalid)

The main thing is to make these html5 tags into blocks, like p. Okay, let’s keep it simple, in one sentence: quote html5.js to make html5 tags blocky

Second method: Coding JavaScript

<!--[if lt IE9]>    
<script>    
   (function() {   
     if (!    
     /*@cc_on!@*/
     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(&#39;, &#39;);   
     var i= e.length;   
     while (i--){   
         document.createElement(e[i])   
     }    
})()    
</script>   
<![endif]-->

• 
  

But no matter which of the above methods is used, the CSS of the new tag must be initialized. Because HTML5 behaves by default For inline elements, to lay out these elements we need to use CSS to manually convert them into block elements for easy layout

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

• 
  

But if users of ie6/7/8 disable scripts, it will become an unstyled "whiteboard" web page. How should we solve it? ?

We can refer to Facebook’s approach, which is to guide users to enter the “/?_fb_noscript=1” page with the noscript logo and replace the html5 tag with the html4 tag. This is better than maintaining the It's easier to write a lot of hacks for compatibility.

<!--[if lte IE 8]>
<noscript>
     <style>.html5-wrappers{display:none!important;}</style>
     <p class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.   
     </p>
</noscript>
<![endif]-->

• 
  

# This can guide the user to open the script or jump directly Go to the interface of HTML4 tag design.

2. Make old browsers compatible with CSS3 (incomplete compatibility solution)

As of Internet Explorer 8, the IE series does not support CSS3. To do some commonly used effects in IE such as rounded corners and shadows, you need to use some redundant and meaningless elements and

pictures to create these effects. After getting tired of these, I thought about using more concise, direct and effective, CSS3-style methods to solve these problems. Fortunately, even Internet Explorer, which has been criticized, is powerful enough in its own right. IE's unique technology can achieve some CSS3 effects very well.

Opacity Transparency

The transparency of elements can be easily achieved using filters in IE.

background-color:green;   
opacity: .4;   
filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);

Translucent area here

opacity: .4;
filter:alpha(opacity=40);

border-radius rounded corner/Box Shadow box shadow/Text Shadow text shadow

In IE Vector Markup Language (VML) and javascript can be used to achieve these effects. See IE-CSS3. After referencing an HTC file, these three CSS3

properties can be used in the IE browser.

CSS CodeCopy content to clipboard

-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 、Chrome */
border-radius: 15px; /* Opera 10.5+, IE6+ 使用 IE-CSS3*/
-moz-box-shadow: 5px 5px 5px #000; /* Firefox */
-webkit-box-shadow: 5px 5px 5px #000; /* Safari、Chrome */
box-shadow: 5px 5px 50px #000; /* Opera 10.5+，IE6+ 使用 IE-CSS3 */
behavior: url(ie-css3.htc); /*引用ie-css3.htc */

In fact, IE has its own filter to implement shadow and The

shadow of the drop-shadow effect will produce continuous, gradient shadows

filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=10);

The shadows produced by drop-shadow have no light and dark changes

filter:progid:DXImageTransform.Microsoft.DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1");

The filter seems to conflict with the existing htc script, or it can be called a feature: when both are enabled on an element at the same time, the filter effect will be transferred to its child elements

The above is the detailed content of Detailed explanation on the issue of compatibility of old browsers with HTML5 and CSS3. For more information, please follow other related articles on the PHP Chinese website!