海天无影BLOG

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

现在很多网站都已经抛弃了，但是像服务行业的网站却必须照顾到每一个浏览器的用户，所以很多情况下，网站都会使用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]-->