欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談原生頁面兼容IE9問題的解決方案

  發(fā)布時(shí)間:2020-12-16 16:13:51   作者:小海前端   我要評論
這篇文章主要介紹了淺談原生頁面兼容IE9問題的解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

最近,接了一個(gè)客戶的原生頁面??蛻粢笤擁撁姹仨毤嫒軮E9及其以上版本的瀏覽器,同時(shí)要求360瀏覽器的兼容模式可以正常訪問。360瀏覽器是可以通過代碼強(qiáng)制極速模式的,這個(gè)問題比較容易解決。但是要兼容IE9,許多CSS3屬性和H5新增的API都是無法使用的。本文對這個(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)右鍵單擊頁面空白位置,在彈出的菜單中選擇“切換兼容性模式”,勾選具體的IE版本即可。

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

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

二、IE9對CSS3的支持

1、盒模型布局

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

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

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

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

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

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

.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屬性后,就無需從效果圖寬度和高度中減去相應(yīng)方向的填充大小了。

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

*{box-sizing:border-box;}

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

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

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

這里為大家介紹一個(gè)名為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”的言論。改項(xiàng)目完成后,我將jQuery的版本升級至了3.5.1,親測有效。至少輪播圖、滑動門使用的部分jQuery選擇器和方法是可以使用的。

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

四、IE9不支持placeholder屬性

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

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

實(shí)現(xiàn)原理:借助文本框的value屬性來實(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)生問題:對于密碼域不能單純的使用value屬性來通過腳本模擬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í)無法被看到。
(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兼容性問題,一定還有不足的地方。在后面的文章中,我會大量積累IE9兼容性遇到的其他問題,大家如果遇到此類項(xiàng)目,可以借鑒使用。

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

相關(guān)文章

  • 一行代碼解決各種IE兼容問題,IE6,IE7,IE8,IE9,IE10

    在網(wǎng)站開發(fā)中不免因?yàn)楦鞣N兼容問題苦惱,針對兼容問題,其實(shí)IE給出了解決方案Google也給出了解決方案百度也應(yīng)用了這種方案去解決IE的兼容問題
    2015-09-26
  • CSS背景色漸變寫法兼容ie6至ie9

    很多地方都用到了線性漸變,比如:表單提交按鈕的背景,數(shù)據(jù)展示的標(biāo)題背景等等,本例使用css3:linear-gradient及ie 濾鏡:filter來實(shí)現(xiàn)
    2014-06-05
  • 借助HTML分別禁用IE8, IE9的兼容視圖模式的小技巧

    IE 添加了兼容模式,開啟后會以低一版本的 IE 進(jìn)行渲染,但是我就遇到了一種情況,在 IE8 下只有不使用兼容模式頁面才能顯示正常,下面有個(gè)不錯的方法可以解決這個(gè)問題
    2014-01-07
  • css div實(shí)現(xiàn)的遮罩層完美兼容IE6-IE9 FireFox

    css div 遮罩層想必熟悉網(wǎng)頁的朋友都不陌生吧,網(wǎng)上也有相關(guān)的實(shí)現(xiàn)文章,不過大都對瀏覽器的兼容性不好,在本文將為大家介紹的是一個(gè)可以兼容IE6-IE9 FireFox 的遮罩層,感
    2013-10-11

最新評論