虽然现在大部分方法都能兼容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浏览器兼容方法