记录生活 学习SEO优化 | 他日若遂凌云志 敢笑黄巢不丈夫
>>Home > 学习笔记 > HTML判断浏览器加载css的条件注释语句

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

Tags: | | 作者:海天无影

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

日志信息 »

该日志于2012-01-14 11:38由 海天无影 发表在学习笔记分类下, 你可以发表评论。除了可以将这个日志以保留源地址及作者的情况下转载到你的网站或博客,还可以通过RSS 2.0订阅这个日志的所有评论。

26条评论▼点击进行评论

  1. 抢个沙发。支持技术党

  2. 看的我头都晕了~~

  3. 原来ie还有这个呢? :mrgreen:

  4. 谢谢楼主的分享,顺祝新年快乐,来年生意兴隆。

  5. Mark一下,有时候浏览器兼容真让人头痛

  6. 偶才不管这些,哈哈

  7. 有用的朋友收藏之

  8. 谢谢分享 支持一下

  9. 感觉有时候有必要加这些代码!

  10. 谢谢分享! :mrgreen:

  11. 呵呵,时隔这么久,才见到你的新文章啊,海天兄好忙啊

  12. 是的 分开注释会照顾到所有的朋友 支持

  13. 过来看一下学习来了啊

  14. 好久没看你更新文章了!

  15. 技术达人啊,羡慕啊

  16. 看的眼花缭乱哦
    :)

  17. 很棒啊!

  18. 挺好的。。。。。支持一下

  19. 很多网上都有用这个 :o

  20. 不错,学习一下了

  21. 谢谢博主分享。持续关注中···

  22. 关注关注下哦!

  23. 若不是有话要说,我也不会这么努力的看几个月前的博客,真不知道杯具了谁,只想上上酷鱼谷!

  24. 太复杂了写,看着这么长的代码就烦

  25. 学习了~

  26. 博主记得回访哦,呵呵

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 

« 以后一定要经常来 控制百度搜索引擎收录的方法 »