前言

最近，接了一個(gè)客戶的原生頁(yè)面?？蛻粢笤擁?yè)面必須兼容IE9及其以上版本的瀏覽器，同時(shí)要求360瀏覽器的兼容模式可以正常訪問。360瀏覽器是可以通過代碼強(qiáng)制極速模式的，這個(gè)問題比較容易解決。但是要兼容IE9，許多CSS3屬性和H5新增的API都是無(wú)法使用的。本文對(duì)這個(gè)項(xiàng)目中出現(xiàn)的部分IE9兼容問題做個(gè)系統(tǒng)的總結(jié)。

一、強(qiáng)制360瀏覽器使用極速模式訪問

大家都知道，360瀏覽器存在兩個(gè)訪問模式：“極速模式”和“兼容模式”。極速模式采用Blink內(nèi)核，是蘋果公司的Webkit內(nèi)核的一個(gè)分支，由Google公司研發(fā)并使用在Chrome瀏覽器中。兼容模式采用Trident內(nèi)核，是用于IE瀏覽器的內(nèi)核。

至于在兼容模式下，具體兼容的是IE的哪個(gè)版本，可以在360瀏覽器的兼容模式下，鼠標(biāo)右鍵單擊頁(yè)面空白位置，在彈出的菜單中選擇“切換兼容性模式”，勾選具體的IE版本即可。

由于Blink內(nèi)核和Trident內(nèi)核對(duì)頁(yè)面內(nèi)容渲染的差異性較大，因此使用現(xiàn)代前端技術(shù)制作的Web頁(yè)面，很有可能在兼容模式下無(wú)法正常顯示。為了解決這個(gè)問題，我們可以通過下列代碼，讓該頁(yè)面強(qiáng)制在360瀏覽器的極速模式下工作并渲染。

<meta name="renderer" content="webkit" />

二、IE9對(duì)CSS3的支持

1、盒模型布局

從頁(yè)面布局角度來(lái)說(shuō)，IE9的Trident內(nèi)核的盒模型計(jì)算方式和Blink內(nèi)核的盒模型計(jì)算方式是不一樣的，這主要體現(xiàn)在盒元素的padding屬性上。

例如：一個(gè)div塊級(jí)元素在效果圖中的寬度為400px，高度為600px，同時(shí)四周帶有20px的填充大小。

<div class="box"></div>

（1）在Blink內(nèi)核中，為div塊級(jí)元素添加padding填充，會(huì)將整個(gè)塊級(jí)元素?fù)未?。若要依然保持該元素的效果圖尺寸，則需要從效果圖尺寸中減去周圍的填充大小。代碼如下所示。

.box{
   width:360px;   // 效果圖寬度-左填充大小-右填充大小=400px-20px-20px=360px
   height:560px;  // 效果圖高度-上填充大小-下填充大小=600px-20px-20px=560px
   padding:20px;
}

（2）在Trident內(nèi)核中，為div塊級(jí)元素添加padding填充，并不會(huì)將整個(gè)塊級(jí)元素?fù)未?。所以也無(wú)需減去四周填充的大小。代碼如下所示。

.box{
   width:400px;
   height:600px;
   padding:20px;
}

鑒于上述區(qū)別，在書寫代碼時(shí)要兼容IE9應(yīng)該怎么解決呢？

CSS3提供了一個(gè)box-sizing屬性，用于設(shè)置盒模型的布局模式。該屬性從IE8就開始支持了。當(dāng)box-sizing屬性取值為border-box時(shí)，使用了該屬性的元素在添加padding屬性后，就無(wú)需從效果圖寬度和高度中減去相應(yīng)方向的填充大小了。

那么，我們只需要讓所有的容器都設(shè)置box-sizing屬性為border-box即可統(tǒng)一盒模型的布局模式，自然也就兼容IE9瀏覽器了。代碼如下所示。

*{box-sizing:border-box;}

大家在這句CSS代碼的作用下，可以大膽的進(jìn)行盒模型布局，無(wú)需考慮兼容性。

2、IE9對(duì)彈性盒布局的支持

肯定的說(shuō)，IE9是不支持彈性盒布局的。最簡(jiǎn)單的方法就是不使用Flex彈性盒布局。

這里為大家介紹一個(gè)名為Flex-Native的js庫(kù)，它可以讓IE9使用Flex彈性盒布局。

（1）在頁(yè)面中加載Flex-Native庫(kù)。

<script src="https://unpkg.com/flex-native@latest"></script>

（2）在要使用彈性盒布局的容器上啟用Flex功能。

.box{
   display:flex;       //兼容Blink內(nèi)核
   -js-display:flex;   //在Flex-Native的作用下兼容Trident內(nèi)核
}

（3）其他的Flex屬性正常使用即可。

3、IE9不支持下列CSS3屬性

（1）text-shadow
（2）transform
（3）transition
（4）columns
（5）outline-offset
（6）resize
（7）border-image
（8）CSS3漸變色

4、IE9不支持下列CSS選擇器

（1）::before
（2）::after
（3）::first-letter
（4）::first-line

三、IE9對(duì)jQuery的支持

互聯(lián)網(wǎng)上有許多關(guān)于“IE9只支持2.0版本以下的jQuery”的言論。改項(xiàng)目完成后，我將jQuery的版本升級(jí)至了3.5.1，親測(cè)有效。至少輪播圖、滑動(dòng)門使用的部分jQuery選擇器和方法是可以使用的。

如果有測(cè)試出IE9不支持jQuery 2.0版本以上的哪個(gè)選擇器或方法的，可以補(bǔ)充進(jìn)來(lái)。

四、IE9不支持placeholder屬性

HTML5設(shè)置了placeholder屬性，方便的為表單元素書寫文本占位符。但是IE9不支持該屬性。解決方法可以通過編寫jQuery或JavaScript原生腳本來(lái)實(shí)現(xiàn)。

1、普通文本框的解決方案

實(shí)現(xiàn)原理：借助文本框的value屬性來(lái)實(shí)現(xiàn)占位符。

（1）當(dāng)文本框獲得鼠標(biāo)焦點(diǎn)時(shí)，若文本框的內(nèi)容時(shí)placeholder屬性設(shè)置的文本，則讓文本框內(nèi)容消失。
（2）當(dāng)文本框釋放鼠標(biāo)焦點(diǎn)時(shí)，若文本框的內(nèi)容為空，則讓文本框恢復(fù)placeholder屬性設(shè)置的文本。

我用的是原生JavaScript完成的，在jQuery支持的情況下，大家也可以采用jQuery實(shí)現(xiàn)。

//封裝根據(jù)類名查找DOM節(jié)點(diǎn)的函數(shù)
function $$(className){
    return document.getElementsByClassName(className);
}
// 文本框的placeholder屬性 兼容IE9
if("msDoNotTrack"in window.navigator){    //判斷瀏覽器是否為IE9
    for(var i=0;i<$$("input").length;i++){
        var text=$$("input")[i].getAttribute("placeholder");
        $$("input")[i].value=text;
        $$("input")[i].addEventListener("focus",function(){
            if(this.value==this.getAttribute("placeholder")){
                this.value="";
            }
        })
        $$("input")[i].addEventListener("blur",function(){
            var text=this.getAttribute("placeholder");
            if(this.value==""){
                this.value=text;
            }
        })
    }
}

2、密碼域的解決方案

產(chǎn)生問題：對(duì)于密碼域不能單純的使用value屬性來(lái)通過腳本模擬placeholder功能，因?yàn)関alue屬性的取值在密碼域中顯示的是小圓點(diǎn)的密碼掩碼，而不是真實(shí)的文本內(nèi)容。

解決方案：通過不斷地改變密碼域的type屬性的取值，讓密碼域默認(rèn)的type取值為text，這樣就可以顯示value屬性值了。

（1）當(dāng)密碼域獲得鼠標(biāo)焦點(diǎn)時(shí)，讓其type屬性修改為password，以保證用戶輸入密碼時(shí)無(wú)法被看到。
（2）當(dāng)密碼域釋放鼠標(biāo)焦點(diǎn)時(shí)，讓其type屬性修改為text，以保證顯示placeholder占位文本。

function $$(className){
    return document.getElementsByClassName(className);
}
// 文本框的placeholder屬性 兼容IE9
if("msDoNotTrack"in window.navigator){    
    $$("password")[0].type="text";
    $$("password")[0].addEventListener("focus",function(){
        this.type="password";
    })
    for(var i=0;i<$$("password").length;i++){
        var text=$$("password")[i].getAttribute("placeholder");
        $$("password")[i].value=text;
        $$("password")[i].addEventListener("focus",function(){
            if(this.value==this.getAttribute("placeholder")){
                this.value="";
            }
        })
        $$("password")[i].addEventListener("blur",function(){
            var text=this.getAttribute("placeholder");
            if(this.value==""){
                this.value=text;
                this.type="text"
            }
        })
    }
}

總結(jié)

此次總結(jié)IE9兼容性問題，一定還有不足的地方。在后面的文章中，我會(huì)大量積累IE9兼容性遇到的其他問題，大家如果遇到此類項(xiàng)目，可以借鑒使用。

到此這篇關(guān)于淺談原生頁(yè)面兼容IE9問題的解決方案的文章就介紹到這了,更多相關(guān)原生頁(yè)面兼容IE9內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論