三种解决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 */

posted @ 2017-12-29 11:05  wc_nan  阅读(2530)  评论(0编辑  收藏  举报