前言

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

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

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

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

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

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

二、IE9對CSS3的支持

1、盒模型布局

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

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

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

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

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

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

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

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

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

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

*{box-sizing:border-box;}

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

2、IE9對彈性盒布局的支持

肯定的說，IE9是不支持彈性盒布局的。最簡單的方法就是不使用Flex彈性盒布局。

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

（1）在頁面中加載Flex-Native庫。

<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對jQuery的支持

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

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

四、IE9不支持placeholder屬性

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

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

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

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

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

//封裝根據(jù)類名查找DOM節(jié)點的函數(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)生問題：對于密碼域不能單純的使用value屬性來通過腳本模擬placeholder功能，因為value屬性的取值在密碼域中顯示的是小圓點的密碼掩碼，而不是真實的文本內(nèi)容。

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

（1）當(dāng)密碼域獲得鼠標(biāo)焦點時，讓其type屬性修改為password，以保證用戶輸入密碼時無法被看到。
（2）當(dāng)密碼域釋放鼠標(biāo)焦點時，讓其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兼容性問題，一定還有不足的地方。在后面的文章中，我會大量積累IE9兼容性遇到的其他問題，大家如果遇到此類項目，可以借鑒使用。

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

最新評論