三種解決IE版本兼容性問題



1:條件級別
語法 :<!--[if IE]> 執行內容 包括css和html<![endif]-->
------放到css中:---------
<!--[if IE]>
<style>
p{color:color} // 如果是ie瀏覽器 顏色是紅的
</style>
<![endif]-->

------放到html中:---------
<!--[if IE]>
<p>如果是IE流浪器則執行該代碼的<p>
<![endif]-->

<!--[if <keywords>? IE <version>?]>
HTML代碼塊
<![endif]-->

有六種取值空間
是否 ‘空’、大於 ‘gt’、大於等於 ‘gte’、小於 ‘lt’、小於等於 ‘lte’、非指定版本 ‘!’


<!--[if gt IE 6]>
<style>
p{color:color} // 如果ie瀏覽器 大於IE6 時 顏色是紅的
</style>
<![endif]-->

<!--[if gte IE 6]>
<style>
p{color:blue} // 如果ie瀏覽器 大於等於IE6 時 顏色是藍色的
</style>
<![endif]-->

 

2:屬性級別
語法:
selector{<hack>?property:value<hack>?;}

取值區間:
_ 下划線:屬性前面加下划線_ 適應 IE6 以及IE6 以下版本(-連接線 中划線也可以,但是為了避免與屬性混淆 建議使用下划線_)
* 星號:屬性前面加星號*, 適用於IE7 及以下版本
\9 :IE6 及以上版本
\0 :IE8 及以上和Opera15以下的瀏覽器

<style>
.test1{
_color:red;
}
.test2{
*color:green;
}
.test3{
color:blue\9;
}
</style>
<body>
<!--[if IE]>
<div>是IE瀏覽器<div>
<![endif]-->
<p>非IE瀏覽器</p>
<div class="test1">我是IE6 及以下的版本 顏色是紅的</div>
<div class="test2">我是IE7 及以下的版本 顏色是green的</div>
<div class="test3">我是IE6 及以上的版本 顏色是blue的</div>
</body>


3:選擇操作符級別
語法:
<hack> selector{ sRules }

選擇不同的瀏覽器及版本
盡可能減少對CSS Hack的使用。Hack有風險,使用需謹慎
通常如未作特別說明,本文檔所有的代碼和示例的默認運行環境都為標准模式。
一些CSS Hack由於瀏覽器存在交叉認識,所以需要通過層層覆蓋的方式來實現對不同瀏覽器進行Hack的。
簡單列舉幾個:
* html .test { color: #090; } /* For IE6 and earlier */
* + html .test { color: #ff0; } /* For IE7 */
.test:lang(zh-cmn-Hans) { color: #f00; } /* For IE8+ and not IE */
.test:nth-child(1) { color: #0ff; } /* For IE9+ and not IE */


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM