CSS hack

時間 2019-12-08

標籤 css hack 欄目 CSS 简体版

原文原文鏈接

CSS hack

　　在這個瀏覽器百花爭鳴的時代，做爲前端開發的咱們爲了咱們漂亮的設計能適應各個瀏覽器可爲煞費苦心，主要體如今javascript和css上面。javascript我此次就不談了，先說說css。javascript

　　爲了適應不一樣瀏覽器不一樣的版本（版本主要就ie來講），ie這朵奇葩之前咱們要兼容6-9，而如今10也出來了，在ie下咱們能夠寫條件註釋來區分ie和其餘瀏覽器，以及ie的版本，這些請你們自行去搜索吧。不過ie10這朵奇葩，丫的竟然不支持條件註釋。在這裏向ie 10 的開發工程師的全家問「好」。css

Ok，廢話很少說了。直接上代碼。html

.test{前端

background: #f00; /*各瀏覽器都認識，主要給高級瀏覽器用*/java

background: blue\0; /*ie十、九、8*/瀏覽器

background: red\9; /*全部的 ie*/app

background:#F60\0\9; /*\0\9 或 \9\0 IE8*/測試

+background: yellow; /*ie七、6 +號同*號 */spa

_background:black; /*ie6*/設計

}

:root .test{background: blue\9;} /*ie9*/

background: #f00; 各瀏覽器都認識，主要給高級瀏覽器用

background: blue\0; 網上說是給IE8的，不過通過測試，IE十、九、8都認識他。

background:#F60\0\9; 這個東西是給IE8 玩的

background: red\9; 這個東西好玩了，全部的ie都認識他。

+background: yellow; *或+ 留給了IE七、6 這一點仍是不錯的

_background:black; _專門留給神奇的ie6

:root .test{background: blue\9;} :root是給ie9的，網上流傳了個版本是 :root #test { background:blue\0;}，新版opera也認識，因此通過反覆驗證最終ie9特有的爲:root 選擇符 {屬性\9;}

而最奇葩的實際上是IE10，檢測IE10有三種方法：

No.1 特性檢測：@cc_on

咱們能夠用IE私有的條件編譯(conditional compilation)結合條件註釋來提供針對ie10的Hack：

<!--[if !IE]><!--<script>

if (/*@cc_on!@*/false) {

document.documentElement.className+=' ie10';

}

</script>

請注意/*@cc_on ! @*/中間的這個感嘆號。

這樣就能夠在ie10中給html元素添加一個class=」ie10″，而後針對ie10的樣式能夠卸載這個這個選擇器下：

.ie10 .test {

/* IE10-only styles go here */

}

條件編譯支持全部版本的ie瀏覽器，而其它瀏覽器不支持。可是頗有可能之後IE11出來後，這種方法就失效了。。。

須要注意的是，條件編譯不支持Windows store中的app中使用，只支持在IE瀏覽器中使用。

固然，咱們也能夠用傳統的用ua給ie10中html元素添加class的方法來實現。

No.2@media -ms-high-contrast

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

/* IE10-specific styles go here */

.test{background: #ffcccc;}

}

這種寫法能夠適配到高對比度和默認模式。因此能夠覆蓋到全部ie10的模式了。

而後這種方式可能也會在後面的IE11中生效。

固然，方法二也能夠和方法一一塊兒用：

然而這個東西若是遇到了IE9的root 就很差用了。

No.3：@media 0

這個有些變態了，並且不太完美，由於IE9也支持media，也支持\0的hack：

@media screen and (min-width:0\0) {

/* IE9 and IE10 rule sets go here */

}

不過，估計後面ie10也會普及到Windows 7平臺，因此ie9會消失，只是看看ie8和ie7的份額，這種狀況可能不會發生吧。。。

總結：

上面這麼一大坨，看起來亂亂的，在此爲你們提供了一個相對來講較好的方法：

<!doctype html>

<html>

<head>

　　<meta charset="utf-8">

　　<title>document</title>

　　<style>

　　.test{

　　width: 300px;

　　height: 300px;

　　background: #f00;   /*各瀏覽器都認識，主要給高級瀏覽器用*/

　　background: blue\0; /*ie十、九、8*/

　　background: red\9; /*全部的 ie*/

　　+background: yellow; /*ie七、6 +號同*號 */

　　_background:black; /*ie6*/

　　}


　　:root .test{background: blue\9;} /*ie9*/

　　.ie10 .test{background: #ffcccc;} /*ie10  (js 專屬)*/

　　</style>

　　<script type="text/javascript">

　　//ie 10
　　
　　if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {

    document.documentElement.className += "ie10";

　　}

　　</script>

</head>

<body>

<div class="test">test</div>

</body>

</html>

若是運行代碼有問題，請你們能夠保存成html。

PS：仍是那句話，咱們能不用hack就不用hack。

PPS：文章部門內容來自前端觀察

1. css hack hack
2. CSS之CSS hack
3. CSS Hack
4. CSS HACK
5. css hack
6. CSS hack
7. css HACK
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。