今天發(fā)現(xiàn)某網(wǎng)站上，IE9和chrome中頁(yè)面的功能居然有差異，于是在IE9下打開console，發(fā)現(xiàn)一堆js報(bào)錯(cuò)，用fiddler跟蹤了一下，原來(lái)代碼里有一句是這樣的：

if(ie){
  var iframe = document.createElement('<iframe src="http://www.dbjr.com.cn"></iframe>');
}

是的，問(wèn)題就出在這里：DOM Exception: INVALID_CHARACTER_ERR (5)
因?yàn)樵贗E9里面，一些方法已經(jīng)向w3c標(biāo)準(zhǔn)靠攏，和firefox、chrome瀏覽器等都保持了一致，包括這里的document.createElement方法。
因此，這里的代碼需要改成：

if(ie && version < 9) {
  var iframe = document.createElement('<iframe src="http://www.dbjr.com.cn"></iframe>');
} else {
  var iframe = document.createElement('iframe');
  iframe.setAttribute('src','http://www.dbjr.com.cn');
}

不過(guò)，如果頁(yè)面上加上了這個(gè)meta標(biāo)簽的話，能將IE9的文檔模式強(qiáng)制降級(jí)到IE7：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

這樣可以繞開這個(gè)BUG，不過(guò)我的建議是，如果頁(yè)面上沒(méi)有什么特殊的不能處理的，不要加這樣的強(qiáng)制，會(huì)導(dǎo)致一些正常模式下不可控的現(xiàn)象。

在這里，我也順便列幾條我印象中的IE各個(gè)版本的差異性：

1、IE6
a、不支持png半透明圖片，只能用filter實(shí)現(xiàn)
b、不支持css的max-width、max-height、min-width、min-height
其他不用說(shuō)，一團(tuán)糟，不過(guò)項(xiàng)目中還是得去兼容！

2、IE7
a、解決了png半透明圖片的支持問(wèn)題
b、解決了css的max-width、max-height、min-width、min-height支持
c、解決了css float導(dǎo)致的bug
d、增強(qiáng)了css選擇器，比如，div節(jié)點(diǎn)也支持:hover偽類了
雖然解決了IE6的很多問(wèn)題，不過(guò)IE7始終是一個(gè)中間產(chǎn)物，很多時(shí)候會(huì)出現(xiàn)讓人摸不著頭腦的樣式問(wèn)題，一般情況下，zoom:1是萬(wàn)能的

3、IE8
a、完全支持css2.1的選擇器，向w3c看齊，逐步標(biāo)準(zhǔn)化
b、去掉了css中expression的支持，而增加-ms-的私有前綴
c、js方面，支持localStorage了
d、由于版本多，所以搞出了一個(gè)UA兼容模式：X-UA-Compatible

4、IE9
a、css3支持（部分）
b、html5支持（部分）
但是Javascript引擎換掉了，換成了chakra，性能很贊，同時(shí)也反映出：部分DOM操作已經(jīng)不再向下兼容了。在這個(gè)時(shí)候，IE9已經(jīng)實(shí)現(xiàn)w3c標(biāo)準(zhǔn)化了。

5、IE10
a、css3和html5的強(qiáng)支持
b、更多的-ms-私有屬性（私有屬性多了以后，會(huì)不會(huì)又走偏了？當(dāng)然，這是chrome和firefox帶頭走偏的。。。各種私有屬性?。。。?/p>

總之，咱們做前端的，就得跟著變化走，然后去適應(yīng)這些變化。

最新評(píng)論