網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

IE10 CSS Hack(順便聊聊IE11的CSS Hack)

日期:2013-12-16  來源:攀枝花惠康網絡公司

有IE就有hack,看看IE9的css hack,IE8的css hack;上次同事說一個頁面IE10下有問題,IE9下測試了一下,也有同樣的問題。悲劇了趕緊找IE10的hack。

這個體例不是太完美,因為IE9和預覽版的IE11也撐持media和\0的hack。

CSS 123 @media screen and (min-width:0\0) {     /* IE9 , IE10 ,IE11 rule sets go here */}

我們可以用IE私有的前提編譯(conditional compilation)連系前提注釋來供給針對ie10的Hack:該劇本瑯縵沔的IE解除前提注釋,以確保IE6-9不認可它,然后它功能檢測到了名為@ cc_on。

XHTML 12345 <!--[if !IE]><!--><script>if (/*@[email protected]*/false) {    document.documentElement.className+=' ie10';}</script><!--<![endif]-->

請注重/*@cc_on ! @*/中心的這個感傷號。

這是ie10尺度模式下的截圖:

Snip20130702_1

這是ie10,IE8模式下的截圖:

Snip20130702_2

google上翻到的IE10 CSS Hacks 還算斗勁適用的。記實一下以備后用。

一、特征檢測:@cc_on

Snip20130702_4。

考錄到兼容往后的IE版本,好比IE11,js代碼可以改一下:

JavaScript 123 if (/*@[email protected]*/false) {    document.documentElement.className+=' ie' + document.documentMode;}

關于document.documentMode可以查看IE的documentMode屬性(IE8+新增)。

可能是想多了,實事上經測試預覽版的IE11已經不撐持@ cc_on語句,不知道正式版會不會撐持。不外這樣區分IE11卻是一件好事。這樣改削代碼:

XHTML 1234567891011121314151617181920212223242526272829303132333435363738 <!DOCTYPE HTML><html><head>    <meta charset="utf-8">    <title>無問題文檔</title>    <!--[if !IE]><!--> (/*@[email protected]*/false) {            document.documentElement.className += ' ie' + document.documentMode;        }        // 針對IE11及非IE瀏覽器,        // 因為IE11下document.documentMode為11,所以html標簽上會加ie11樣式類;        // 而非IE瀏覽器的document.documentMode為undefined,所以html標簽上會加ieundefined樣式類。        if (/*@[email protected]*/true) {            document.documentElement.className += ' ie' + document.documentMode;        }    </script>    <!--<![endif]-->    <style type="text/css">        .ie10 .testclass {            color: red        }        .ie11 .testclass {            color: blue        }        .ieundefined  .testclass {            color: green        }    </style></head> <body><div class="testclass">    test text!</div>eight: 19px;">此魷負

JavaScript 123 if (/*@[email protected]*/true) {    document.documentElement.className += ' ie' + document.documentMode;}

呵呵,純屬YY,IE11正式版還不知道什么樣子,而且在現實的項目中跟著IE的逐漸尺度化,IE11和IE10可能很少用不到css hack。

二、@media -ms-high-contrast 體例

以上代碼是針對IE11及非IE瀏覽器,因為:

  • IE11下document.documentMode為11,所以html標簽上會加ie11樣式類;
  • 而非IE瀏覽器的document.documentMode為undefined,所以html標簽上會加ieundefined樣式類。

這樣把IE11也區扶持來了,IE11預覽版下的截圖:

IE10撐持媒體發芽,然后也撐持-ms-high-contrast這個屬性,所以,我們可以用它來Hack IE10:

這樣就可以在ie10中給html元素添加一個class=”ie10″,然后針對ie10的樣式可以卸載這個這個選擇器下:

CSS 123 .ie10 .example {    /* IE10-only styles go here */}

CSS 123 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {    /* IE10-specific styles go here */}

這種寫法可以適配到高對比度和默認模式。所以可以籠蓋到所有ie10的模式了。這種體例在預覽版的IE11中也生效。

當然,體例二也可以和體例一一升引:

JavaScript 123 if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {    document.documentElement.className += "ie10";}

三、@media 0 體例


總之,跟著IE的逐漸尺度化,IE11和IE10可能很少用不到css hack,不看也罷,呵呵。

 

文章來源:攀枝花惠康網絡公司

惠康網絡,是一家專業從事攀枝花網站建設,攀枝花網站制作,攀枝花網站設計公司,提供網站建設一條龍服務(網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣),惠康網絡立足攀枝花,輻射全中國,攀枝花惠康網絡的客戶已經遍布國內各地大中小城市,我們高效優質的網站建設服務深受用戶好評。

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图