日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

ie10 css hack 條件注釋等兼容方式整理

云知道

ie10已經(jīng)上線一段時(shí)間了，相信已經(jīng)有一部分前端潮人體驗(yàn)過了，但是針對(duì)ie10的css hack大家了解嗎？
去年微軟宣布，win8的Metro版IE10將不再支持插件，并且不再支持條件注釋，這顯然是一個(gè)冒險(xiǎn)的舉動(dòng) 。截至到現(xiàn)在，在ie6到ie9的瀏覽器各種各樣的古怪行為，開發(fā)人員不得不使用條件注釋，有條件的類，和其他特定于IE的css hack來解決 。

ps:條件注釋是一種安全的區(qū)分IE瀏覽器版本的語法，且被認(rèn)為是取代針對(duì)IE css hack的首選辦法 。
但是，如果IE10不再支持條件注釋，我們唯一的選擇只能針對(duì)css的問題用css hack或者判斷瀏覽器來解決 我們當(dāng)然不希望試用后者 。
有趣的是，國外已經(jīng)出現(xiàn)了牛人的解決方法，當(dāng)然不是專門使用一個(gè)css hack 解決問題的的代碼片段 。下面是給出這三項(xiàng)技術(shù)的總結(jié)，以供參考 。

方法一：特性檢測：@cc_on
我們可以用IE私有的條件編譯(conditional compilation)結(jié)合條件注釋來提供針對(duì)ie10的Hack：該腳本里面的IE排除條件注釋，以確保IE6-9不承認(rèn)它，然后它功能檢測到了名為@ cc_on 。在這里：

復(fù)制代碼代碼如下:
!DOCTYPE html
html
head
meta charset=utf-8 /
titleJS Bin/title
/head
body
!--[if !IE]!--script
if (/*@cc_on!@*/false) {
document.documentElement.className =’ ie10’;
}
/script!--![endif]--
/body
/html

請(qǐng)注意/*@cc_on ! @*/中間的這個(gè)感嘆號(hào) 。
這樣就可以在ie10中給html元素添加一個(gè)class=ie10，然后針對(duì)ie10的樣式可以卸載這個(gè)這個(gè)選擇器下：

復(fù)制代碼代碼如下:
.ie10 .example {
/* IE10-only styles go here */
}

條件編譯支持所有版本的ie瀏覽器，而其它瀏覽器不支持 。但是很有可能以后IE11出來后，這種方法就失效了 。。。
需要注意的是，條件編譯不支持Windows store中的app中使用，只支持在IE瀏覽器中使用 。
當(dāng)然，我們也可以用傳統(tǒng)的用ua給ie10中html元素添加class的方法來實(shí)現(xiàn) 。
不像其他的解決方案，在這種方法中，實(shí)際上是依賴于JavaScript，所以從另一個(gè)角度來看，我們是反對(duì)的 。
當(dāng)然有人已經(jīng)發(fā)布的改進(jìn)的版本，這個(gè)檢測功能，將不包括IE11，并不需要條件注釋 。然而它會(huì)引發(fā)eval is eviljs警告報(bào)錯(cuò)信息 。
下面是演示：
在這里，我創(chuàng)建了一個(gè)替代版本不具備的eval警告：
http://jsbin.com/okuzut/2/edit
您也可以嘗試，這只是打印出當(dāng)前的IE版本，這個(gè)版本沒有測試：
http://jsbin.com/okuzut/1/edit
但是，這似乎在IE8錯(cuò)誤，讀為IE5，直到您刷新頁面，非常奇怪 。

方法二：@media -ms-high-contrast
IE10支持媒體查詢，然后也支持-ms-high-contrast這個(gè)屬性，所以，我們可以用它來hack ie10：

復(fù)制代碼代碼如下:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
}

這種寫法可以適配到高對(duì)比度和默認(rèn)模式 。所以可以覆蓋到所有ie10的模式了 。
然后這種方式可能也會(huì)在后面的IE11中生效 。
當(dāng)然，方法二也可以和方法一一起用：

復(fù)制代碼代碼如下:
if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
document.documentElement.className= "ie10";
}

實(shí)例：

復(fù)制代碼代碼如下:
!DOCTYPE html
html
head
meta charset=utf-8 /
titleJS Bin/title
/head
body
/body
/html


方法三：@media 0
這個(gè)有些變態(tài)了，而且不太完美，因?yàn)镮E9也支持media，也支持的hack：

復(fù)制代碼代碼如下:
@media screen and (min-width:0) {
/* IE9 and IE10 rule sets go here */
}

不過，估計(jì)后面ie10也會(huì)普及到Windows 7平臺(tái)，所以ie9會(huì)消失，只是看看ie8和ie7的份額，這種情況可能不會(huì)發(fā)生吧 。

推薦閱讀