海天无影Blog

HTML判断浏览器加载css的条件注释语句

/ 1713阅 / 26评 / 2

现在很多网站都已经抛弃了,但是像服务行业的网站却必须照顾到每一个浏览器的用户,所以很多情况下,网站都会使用HTML判断浏览器的条件注释语句,来根据不同浏览器加载不同的css样式,这样才能照顾到那些还没有放弃IE6的用户,以及其他版本浏览器。

之前海天负责的一个网站,就是用的这个判断来处理不同浏览器来加载不同css的。昨天突然出了一点问题,才发现这个HTML判断浏览器加载css的条件注释语句还是比较智能的。

昨天将一个网站从windows下换到linux下,其他浏览器访问都是正常的,但是今天来看IE9出现了CSS不能加载的问题。因为网站原来的制作人员问题,css没有hack处理,只做了判断浏览器加载不同css的处理。后来发现这个IE9不能加载css的问题竟然还是他判断语句写错了,不过很奇怪的是,同一条判断语句,在windows服务器下IE9就能正常加载css,但是在linux却不能正常加载,看来还是和服务器有点关系。

HTML条件注释语句也叫IE条件注释
因为这个条件注释语句在IE5中首次出现,并且得到了Widnows浏览器所有后续版本的支持。IE条件注释及其有效,而且非常容易记住。通过这些技巧,我们可以为基于Windows的IE5、6、7、8添加一些特殊的行为。这样做的好处是,HTML和CSS代码可以通过验证。主要的缺点是这些注释需要放在HTML页面中,而不是放在CSS中。这样,当你不需要这些东西,或者有所更改的时候,就需要维护很多的地方。好处是通过这种方式使用条件注释,可以很轻松的管理项目中的目标浏览器,并使得CSS补丁文件保持独立自由。更重要的是它帮助我们优化了 CSS样式表,保证了主要样式表的干净,这对于大型网站来说就很重要了。

条件注释判断条件

gt : greater than,选择条件版本以上版本,不包含条件版本

lt : less than,选择条件版本以下版本,不包含条件版本

gte : greater than or equal,选择条件版本以上版本,包含条件版本

lte : less than or equal,选择条件版本以下版本,包含条件版本

! : 选择条件版本以外所有版本,无论高低

条件注释判断的对象

IE6以前版本、IE6、IE7、IE8、IE9、非IE浏览器

条件注释判断的使用方法

和一般HTML注释语句一样,将需要判断的css样式用注释判断调用起来。举例:
Target ALL VERSIONS of IE( 所有的IE可识别 )
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" mce_href="all-ie-only.css" /><![endif]-->

Target everything EXCEPT IE (除IE外都可识别 )
<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" mce_href="not-ie.css" /><![endif]-->

Target IE 7 ONLY ( 仅IE7可识别 )
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" mce_href="ie7.css"><![endif]-->

Target IE 6 ONLY(仅IE6可识别)
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" mce_href="ie6.css" /><![endif]-->

Target IE 5 ONLY(仅IE5.0与IE5.5可以识别 )
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" mce_href="ie5.css" /><![endif]-->

Target IE 5.5 ONLY(只有IE5.0可以识别)
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" mce_href="ie55.css" /><![endif]-->

Target IE 6 and LOWER(IE6和IE6以下的)
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" mce_href="ie6-and-down.css" /><![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" mce_href="ie6-and-down.css" /><![endif]-->

Target IE 7 and LOWER(IE7和IE7以下的)
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" mce_href="ie7-and-down.css" /><![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" mce_href="ie7-and-down.css" /><![endif]-->

Target IE 8 and LOWER(IE8和IE8以下的)
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" mce_href="ie8-and-down.css" /><![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" mce_href="ie8-and-down.css" /><![endif]-->

Target IE 6 and HIGHER(IE6和IE6以上的)
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" mce_href="ie6-and-up.css" /><![endif]-->
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" mce_href="ie6-and-up.css" /><![endif]-->

Target IE 7 and HIGHER(IE7和IE7以上的)
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" mce_href="ie7-and-up.css" /><![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" mce_href="ie7-and-up.css" /><![endif]-->

Target IE 8 and HIGHER(IE8和IE8以上的)
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" mce_href="ie8-and-up.css" /><![endif]-->
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" mce_href="ie8-and-up.css" /><![endif]-->

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注