瀏覽器安全色之條件注釋,cssHack

標籤：

對於形形色色的瀏覽器，隨之而來的就是一些相容問題，大多應該都是IE下的相容問題，因為任何瀏覽器下出現渲染不一致都極有可能是我們自己的結構或樣式不符合W3C的某些要求，或者說違背了瀏覽器的某些規則而先造成的，所以我們應該盡量通過結構或CSS的修改來達到各瀏覽器渲染一致效果！

條件運算式（註：條件注釋只能用在IE5-IE9，因為微軟已經在IE10以後的版本中已禁用IE特有的條件注釋功能,詳情見:https://msdn.microsoft.com/zh-cn/library/ie/hh801214%28v=vs.85%29.aspx）

    <!--[if IE n]>        ...    <![endif]--><!--專對於IEn的一些樣式-->    <!--[if gt IE n]>        ...    <![endif]--><!--專對於IEn以上版本的一些樣式-->    <!--[if lt IE n]>        ...    <![endif]--><!--專對於IEn以下版本的一些樣式--><!--[if gte IE n]>        ...    <![endif]--><!--專對於IEn及以上版本的一些樣式--><!--[if lte IE n]>        ...    <![endif]--><!--專對於IEn及以下版的一些樣式-->　　<!--[if !ie]><-->
    <!--<![endif]--><!--專對於除IE以外的一些樣式-->

條件樣式不但能用在樣式上，還能用在javascript上，但是請留意條件注釋只會在IE9及以下版本下識別。

例如下面這一段代碼只會在IE9下才會起用用，但是你把9改成10，在IE10下是沒有任何效果的

　　<!--[if IE 9]>    <style type="text/css">        .typ{background:blue}    </style>    <script type="text/javascript">        alert("this is IE瀏覽器！");    </script>    <![endif]-->　　<!--下面的這一段代碼在IE10下是沒有任何效果的-->　　<!--[if IE 10]>    <style type="text/css">        .typ{background:blue}    </style>    <script type="text/javascript">        alert("this is IE瀏覽器！");    </script>    <![endif]-->

<!--下面的這一段代碼除了在Firefox，chrome下會彈出外，在IE10也會彈出-->

　　<!--[if !ie]><-->
　　　　<script type="text/javascript">        alert("this is not IE瀏覽器！");    　　</script>
    <!--<![endif]-->

綜上所述，條件注釋只能用來用來解決IE9下的相容問題，當然一般遇到樣式相容問題一般都是IE6-IE8下。

cssHack解決樣式相容問題:cssHack分為從css選取器和css屬性上來區別不同的Hack寫法

css選取器寫法

/*1、IE6以及IE6以下版本瀏覽器*/    * html .demo {color: green;}        /*2、僅僅IE7瀏覽器*/   *:first-child+html .demo {color: green;}/*3、除IE6之外的所有瀏覽器（IE7-9, Firefox,Safari,Opera）*/    html>body .demo {color: green;}/*4、IE8-9,Firefox,Safari,Opear*/     html>/**/body .demo {color: green;}/*5、IE9+*/    :root .demo {color: red;}/*6、Firefox瀏覽器*/    @-moz-document url-prefix() {                      .demo {                         color: red;                      }                    }/*6、Webkit核心瀏覽器（Safari和Google Chrome）*/    @media screen and (-webkit-min-device-pixel-ratio:0)    {                        .demo { color: red; }                    }/* 7、Opera瀏覽器*/   @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){                        head~body  .demo { color: red; }                    }/*8、iPhone / mobile webkit*/   @media screen and (max-device-width: 480px) {                        .demo { color: red  }                    }

CSS屬性Hack寫法

/*1、IE6瀏覽器*/    .demo {_color: red;} /*2、IE6-7瀏覽器識別*/    .demo {*color: red;} /*3、所有瀏覽器除IE6瀏覽外*/    .demo {color/**/:red;}        /*4、IE6-9瀏覽器*/    .demo {color: red\9;}         /*5、IE7-8瀏覽器*/    .demo {color/*\**/:red\9;}

使用執行個體

.demo {  color: red;/*所有現代瀏覽器*/  color: green\9;/*所有IE瀏覽器*/  color: lime\0;/*IE8-9瀏覽器*/  *color: red;/*IE6-7瀏覽器*/ +color: blue;/*IE7瀏覽器*/ _color: orange;/*IE6瀏覽器*/ } :root .demo {color: #963\9;} @-moz-document url-prefix(){
　　.demo{color:#897;}/* all firefox */  } @media screen and (-webkit-min-device-pixel-ratio:0){    .demo { color: #000; }/*webkit*/}@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){    head~body  .demo { color: red; }/*opera*/}

其實據個人工作經驗大多布局相容問題都會發在IE6-IE8，對於現代瀏覽器基本沒什麼相容問題，所以記住常用IE下的相容寫法就好啦！

詳細原文見：http://www.w3cplus.com/create-an-ie-only-stylesheet

詳細原文見：http://www.w3cplus.com/css/create-css-browers-hacks

瀏覽器安全色之條件注釋,cssHack