Compatible compatible family of -IE678

1. The simplest CSS Hack distinction IE6, IE7, IE8

css
.color{
    background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
    background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/
    *background-color: #0066FF; /*IE6、IE7会变为蓝色*/
    _background-color: #009933; /*IE6会变为绿色*/
}

The above sequence is interpreted as a style of ff, ie8, ie7, ie6 results displayed:
Browse by FF, color is purple
with IE8 browser, the color is red
with IE7 browser, the color is blue
with IE6 browser, the color is green

2.IE678 support pseudo-element

:: after pseudo-elements :: before and is not supported in IE8 and below

IE8 can identify compatible wording: after and: before

Compatible IE6 / 7 incorporated jq plug is required: jquery.pseudo.js
Usage:
1, introducing jQuery
2, is introduced jquery.pseudo.js
. 3, add css, such as p {before: "before"; }

Code Example:
image description

3.a labels have nested img border

html code: IEs browser:
image description

image description

4. HTML5 compatible new label

The first method: using javascript code

<!--[if lt IE 9]> 
<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(', ');
   var i= e.length;
   while (i--){
     document.createElement(e[i])
   } 
})() 
</script>
<![endif]-->

The second method: using html5shiv

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

//由于国内google的服务器访问卡,建议调用国内的cdn
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

5. compatible video audio tag

First Method: Add the following script in the head section of the page
(Note: in the server need to open)

<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>    

The second method: using Google script file html5media

<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>

6. Compatible css3 selector

Use key official website method :( plug http://selectivizr.com/ )

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
  1. css style can not be directly written in the head of the head, it needs to be introduced into the link by the external style
  2. JS libraries need to be introduced prior to use of the plug, such as jQuery
  3. Need to run to be effective in the server

image description

7. compatible placeholder

IE10 does not support the placeholder and below

Instructions:

<!-- 对于IE 10 以下版本placeholder的兼容性调整 -->
<!--[if lt IE 10]>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function () {  
    //浏览器不支持 placeholder 时才执行  
    if (!('placeholder' in document.createElement('input'))) {  
        $('[placeholder]').each(function () {  
            var $tag = $(this); //当前 input  
            var $copy = $tag.clone();   //当前 input 的复制  
            if ($copy.val() == "") {  
                $copy.css("color", "#999");  
                $copy.val($copy.attr('placeholder'));  
            }  
            $copy.focus(function () {  
                if (this.value == $copy.attr('placeholder')) {  
                    this.value = '';  
                    this.style.color = '#000';  
                }  
            });  
            $copy.blur(function () {  
                if (this.value=="") {  
                    this.value = $copy.attr('placeholder');  
                    $tag.val("");  
                    this.style.color = '#999';  
                } else {  
                    $tag.val(this.value);  
                }  
            });  
            $tag.hide().after($copy.show());    //当前 input 隐藏 ,具有 placeholder 功能js的input显示  
        });  
    }  
});  
</script>
<![endif]-->
Note the use of the place:

The above code still jq, before using Note To quote jq file

image description

8.IE678 compatible media media queries

How to use: Plug respond.js (official website plug- HTTPS: //github.com/scottjehl / ... )

<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
Note the use of plug-compatible place:

1.css style can not be written directly in the head of the head, it is necessary to introduce an external style by Link
2. In the server needs to run only valid
after the introduction of 3.js to be introduced in css

Code Example: IE7 test results:
image description

image description

8.eval compatible IE678

eval compatibility issues

IE6 / 7/8 are not compatible, given
solutions:
A) var S = "function () {Alert () 'the Test!'}";
B) var S = "0 0:? Function () {Alert ( 'the Test ! ')} ";
C) = var Fn the eval (" (|| 0 "+ S +") "); Fn ();

e) var fn = eval("(0," + s + ")"); fn();
f) var fn = eval("0,(" + s + ")"); fn();

(Note: a / b / c program is to find foreign websites, e / f is the website to find)

Guess you like

Origin www.cnblogs.com/jlfw/p/11965784.html