条件注释解决ie浏览器的兼容性问题

时间:2021-09-03 14:13:26

在前端开发过程中最常遇到的就是浏览器兼容性问题,解决方法也有很多,用css hack, js ;在这里我想给大家说一说使用html注释判断ie版本的方法,其原理是:根据不同的ie版本调用特殊的css文件来实现浏览器兼容。

    由于浏览器版本的不同,对CSS里某些元素的解释也不一样,本人当然也碰到同样的问题,也收集了一些解决方法,在之后会继续贴出,希望可以跟大家分享自己关于解决浏览器兼容性问题的一点小小心得。

本文我们主要介绍的是利用条件注释的方法来达到类似的目的,什么是条件注释,在此简单介绍一下,无非就是一些if判断啦,但这些判断不是在脚本里执行的,而是直接在html代码里执行的,下面来介绍一下使用方法吧。

<!– 默认先调用css.css样式表 –>
<link rel=”stylesheet” type=”text/css” href=”css.css” />
<!–[if !IE]>
<!– 非IE下调用1.css样式表 –>
<link rel=”stylesheet” type=”text/css” href=”1.css” />
<![endif]–>
<!–[if lt IE 6]>
<!– 如果IE浏览器版本小于6,调用2.css样式表 –>
<link rel=”stylesheet” type=”text/css” href=”2.css” />
<![endif]–>

(其中要注意的是:条件注释在IE5/WIN 之后才被支持,在 IE5之前的IE版本浏览器是不支持的,不过相信现在应该很少人会用IE5之前的版本的浏览器了吧。)


在上面的代码段中,值得一提的几个参数是:

1.lte:就是Less than or equal to的简写,也就是小于或等于的意思。

2.lt :就是Less than的简写,也就是小于的意思。

3.gte:就是Greater than or equal to的简写,也就是大于或等于的意思。

4.gt :就是Greater than的简写,也就是大于的意思。
5. ! :就是不等于的意思,跟javascript里的不等于判断符相同。