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

前言
最近,接了一個(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- 很多地方都用到了線性漸變,比如:表單提交按鈕的背景,數(shù)據(jù)展示的標(biāo)題背景等等,本例使用css3:linear-gradient及ie 濾鏡:filter來實(shí)現(xiàn)2014-06-05
- 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