兼容系列-IE678的兼容

1. 最簡單的CSS Hack 區分 IE6 、 IE7 、IE8

css
.color{
    background-color: #CC00FF; /*全部瀏覽器都會顯示爲紫色*/
    background-color: #FF0000\9; /*IE六、IE七、IE8會顯示紅色*/
    *background-color: #0066FF; /*IE六、IE7會變爲藍色*/
    _background-color: #009933; /*IE6會變爲綠色*/
}

上面的樣式解釋爲順序是 ff、ie八、ie七、ie6顯示的結果：
用 FF 瀏覽， 顏色是紫色
用 IE8 瀏覽，顏色是紅色
用 IE7 瀏覽，顏色是藍色
用 IE6 瀏覽，顏色是綠色

2.IE678支持僞元素

僞元素::after和::before在IE8及如下不支持

兼容IE8能夠識別寫法 :after 和 :before

兼容IE6/7則須要引入jq插件：jquery.pseudo.js
使用方法：
一、引入jquery
二、引入jquery.pseudo.js
三、添加css，如p{before: "before ";}

代碼示例：

3.a標籤嵌套img有邊框

html代碼：

IE瀏覽器：

4.兼容HTML5新標籤

第一種方法：使用javascript代碼

<!--[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]-->

第二種方法：使用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.兼容video audio標籤

第一方法：在頁面的head部分加入以下腳本
(注：須要在服務器下打開)

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

第二方法：使用谷歌的腳本html5media文件

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

6.兼容css3選擇器

使用關鍵方法：（官網插件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樣式不能直接寫在head頭部，須要經過link來引入外部樣式
2. 使用該插件前須要引入JS類庫，如jQuery
3. 須要運行在服務器下才有效

7.兼容placeholder

IE10及如下不支持placeholder

使用方法:

<!-- 對於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]-->

使用注意地方:

以上代碼依然jq，在使用前注意要引用jq文件

8.IE678兼容media媒體查詢

使用方法：插件respond.js（官網插件https://github.com/scottjehl/...）

<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>

使用插件兼容注意地方：

1.css樣式不能直接寫在head頭部，須要經過link來引入外部樣式
2.須要運行在服務器下才有效
3.js的引入要在css引入以後

代碼示例：

IE7測試效果：

8.eval的兼容IE678

eval的兼容問題

IE6/7/8不兼容，報錯
解決方式：
a) var s = "function(){alert('Test!')}";
b) var s = "0?0:function(){alert('Test!')}";
c) var fn = eval("(0 || " + s + ")"); fn();

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

(注：a/b/c方案是國外網站找到，e/f是國內網站找到)