兼容IE的方法

178 阅读1分钟

虽然现在大部分方法都能兼容IE,但是难免有些功能需要特殊的兼容IE方法,所以还是需要了解一下。在学习过程中根据其他博客进行总结。

一、HTML兼容IE的方法
符号含义
if如果
endif结束如果
lte比较符号,小于等于
IE浏览器品牌名称
9表示版本
lt小于
gt大于
gte大于等于

在html文件中这样使用:

<!--[if lte IE 8]>
    <h2>您的浏览器版本过低,不支持新特性,请更新浏览器</h2>
<![endif]-->
<!--注释内容-->
<!--[if lte IE 9]>
    <h2>小于等于 IE9 的浏览器可以看到</h2>
<![endif]-->
<!--[if lt IE 8]>
    <h2>小于 IE8 的浏览器可以看到</h2>
<![endif]-->
<!--[if gte IE 8]>
    <h2>大于等于 IE8 的浏览器可以看到</h2>
<![endif]-->
<!--[if IE 7]>
    <h2>只有 IE7 浏览器可以看到</h2>
<![endif]-->
二、hack方法的实现
hack符号兼容浏览器
- _ (属性名前面)IE6及以下
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > I (属性名前面)IE7及以下
\0/ (属性值后面)仅IE8
\0 (属性值后面)IE8及以上
\9 (属性值后面)\9 (属性值后面)
* html .selector {}IE6及以下
.selector, {}IE7及以下
html > body .selector {}不兼容 IE6 及以下
html > /**/ body .selector {}不兼容 IE6 及以下
head ~ /* */ body .selector {}不兼容 IE6 及以下

在html文件中这样使用:

body {
    /*IE6及以下*/
    /* _background-color: pink; */
    /*IE7及以下*/
    /* ?background-color: green; */
    /*IE8*/
    /* background-color: gold\0/; */
    /*IE8及以上*/
    /* background-color: red\0; */
    /*IE10及以下*/
    /* background-color: red\9; */	
}

参考文章:# IE浏览器兼容方法