通过判断浏览器类型而加载不同的css样式

<转>

 

      IE浏览器很是让人头疼,可以用很多方法去解决这个问题,当然,hack除外,如

果使用了hack,那么你做网站将变得非常危险!因为你使用了这些hack,你将

保证这些暂时显示正常页面在以后的浏览器中也是正常,其中有一种很好方法可

以解决这个问题,那就是使用IE条件注释语句,IE条件注释语句支持所有IE版本。

 

一、为什么使用这种方法呢?

  • 首先,这需要一个合理的解决方法
  • 请不要使用Hack(因为它很危险!),让你的代码更加的标准化
  • 你应该写出精简高效果的代码
  • 这种方法是被认可的(至少微软认可)

需要记住的是:这种选择标签不只在CSS中用到,你也可以用它来有选择的控制JS

的加载,甚至可以用它来控制网页中的内容显示。

 

二、开始编写代码

以下这些代码应该出现在head标签内,链接CSS文件还是常规方法。打开和关闭

标签应该遵循就近原则,这些都是HTML标签的基本知识,在方扩号之

的“IF”和“IE”等字样应该非常的明显,里面的“!”是“不是”的意思,那

么“!IE”就是“不是IE”的意思,gt是greater than的缩写,就是高于的意思,gte

是greater than or equal的缩写,就是高于或等于的意思,lt是less than的缩写,就

是低于的意思,lte是less than or equal的缩写,就是低于或等于的意思。

 

代码示例:

 

所有的IE都起作用:

<!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->

 

IE以外的浏览器起作用:

<!--[if !IE]><!-->  <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!--<![endif]-->

 

只有IE7起作用:

<!--[if IE 7]>  <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]-->

 

只有IE6起作用:

<!--[if IE 6]>  <link rel="stylesheet" type="text/css" href="ie6.css"/> <![endif]-->

 

只有IE5起作用:

<!--[if IE 5]>  <link rel="stylesheet" type="text/css" href="ie5.css"/> <![endif]-->

 

只有IE5.5起作用:

<!--[if IE 5.5000]>  <link rel="stylesheet" type="text/css" href="ie55.css"/> <![endif]-->

 

只对IE6及以下的版本起作用:

<!--[if lt IE 7]>  <link rel="stylesheet" type="text/css" href="ie6-and-down.css"/> <![endif]-->
<!--[if lte IE 6]>  <link rel="stylesheet" type="text/css" href="ie6-and-down.css"/> <![endif]-->

 

只对IE7及以下的版本起作用:

<!--[if lt IE 8]>  <link rel="stylesheet" type="text/css" href="ie7-and-down.css"/> <![endif]-->
<!--[if lte IE 7]>  <link rel="stylesheet" type="text/css" href="ie7-and-down.css"/> <![endif]-->

 

只对IE8及以下的版本起作用:

<!--[if lt IE 9]>  <link rel="stylesheet" type="text/css" href="ie8-and-down.css"/> <![endif]-->
<!--[if lte IE 8]>  <link rel="stylesheet" type="text/css" href="ie8-and-down.css"/> <![endif]-->

 

只对IE6及以上的版本起作用:

<!--[if gt IE 5.5]>  <link rel="stylesheet" type="text/css" href="ie6-and-up.css"/> <![endif]-->
<!--[if gte IE 6]>  <link rel="stylesheet" type="text/css" href="ie6-and-up.css"/> <![endif]-->

 

只对IE7及以上的版本起作用:

<!--[if gt IE 6]>  <link rel="stylesheet" type="text/css" href="ie7-and-up.css"/> <![endif]-->
<!--[if gte IE 7]>  <link rel="stylesheet" type="text/css" href="ie7-and-up.css"/> <![endif]-->

 

只对IE8及以上的版本起作用:

<!--[if gt IE 7]>  <link rel="stylesheet" type="text/css" href="ie8-and-up.css"/> <![endif]-->
<!--[if gte IE 8]>  <link rel="stylesheet" type="text/css" href="ie8-and-up.css"/> <![endif]-->

 

三、通常对IE6做这样的处理:

 

对于IE6及以下版本的处理是很具有挑战性的.近来,人们都在呼吁对IE6不要太在意

包括一些企业,一些网络应用,甚至是政府。现在有一个比让这些在 IE6下让人惨

忍睹的网站下地域更好的解决方案,那就是单独写一个针对IE6的精简的CSS样

表,这样至少不会影响人们浏览网页的主要内容。然后再写一个IE6以上版本及其它

的浏览器用的正常的CSS,这样不是很好?

 

<!--[if !IE 6]><!-->  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" /> <!--<![endif]-->   
<!--[if gte IE 7]>  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" /> <![endif]-->   
<!--[if lte IE 6]>   
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" /> 
<![endif]-->

 

四、如果你非要用HACK来解决的话……请往下看

 

只对IE7起作用:

* html #div {     height: 300px; }

 

对非IE7起作用:

#div {     _height: 300px; }

 

只对IE6以上的版本起作用:

#div {    height/**/: 300px; }
html->body #div {       height: 300px; }

猜你喜欢

转载自940324857.iteye.com/blog/2320145
今日推荐