根据浏览器不同加载不同的css实现兼容

来自:互联网
时间:2020-03-10
阅读:
浏览器有IE阵营、火狐阵营、谷歌阵营、苹果Safari阵营,特别是IE系列,更是有各种版本兼容问题,由于其他浏览器都能轻易升级到新版,而只有IE升级麻烦,高版本的IE甚至需要高版本系统的支持,低版本的系统根本装不了高版本的ie浏览器。

实际工作中浏览器的兼容性主要在于ie浏览器各种版本之间的兼容问题。

要根据浏览器不同加载不同的CSS实现兼容有很多方式,ie的条件注释实现不同浏览器加载不同css样式的方法

使用ie的条件注释区分不同浏览器

<!--[if lte IE 6 ]> <html class="ie ie6 lte_ie7 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]-->

<!--[if IE 7 ]> <html class="ie ie7 lte_ie7 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]-->

<!--[if IE 8 ]> <html class="ie ie8 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]-->

<!--[if IE 9 ]> <html class="ie ie9 lte_ie9" lang="zh-CN"> <![endif]-->

<!--[if (gt IE 9)|!(IE)]><!--> <html lang="zh-CN"> <!--<![endif]-->

这里使用了条件注释判断不同的浏览器就在html这个根元素上添加上不同的类名

当然,也可以使用引入外部样式表的方式实现

<!--[if IE 9 ]>

<link rel="stylesheet" type="text/css" href="css.css">

<![endif]-->

作为条件注释,其实条件注释之间是可以写任意html代码的

<!--[if IE 9 ]> 

html代码

<![endif]-->

ie条件注释的一些注解

<!--[if !IE]>除IE外都可识别<![endif]--> 

<!--[if IE]> 所有的IE可识别 <![endif]--> 

<!--[if IE 6]> 仅IE6可识别 <![endif]--> 

<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--> 

<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--> 

<!--[if IE 7]> 仅IE7可识别 <![endif]--> 

<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]--> 

<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

<!--[if IE 8]> 仅IE8可识别 <![endif]--> 

<!--[if lt IE 8]> IE8以及IE8以下版本可识别 <![endif]--> 

<!--[if gte IE 8]> IE8以及IE8以上版本可识别 <![endif]-->

返回顶部
顶部