关闭

CSS对IE7,IE6,FireFox和其它不同浏览器的控制

标签: iefirefoxcss浏览器javascriptdiv
885人阅读 评论(0) 收藏 举报
就是通过javascript判断浏览器的类型,然后针对不同的浏览器链接不同的CSS文件。

我们针对不同的浏览器开发出不同的CSS文件,一个针对IE,一个针对Firefox,一个针对其它所有类型的浏览。这样,我们在设计时,就不用去考虑太多,只要我这个CSS能在FF中正常显示,我就不管IE下执行下怎么样了,同样IE中正常的CSS,也不去管它在FF中会是显示如何的乱。

首先,我们在HTML代码里要放入<link></link>标签,标签里先写入默认要用到的CSS文件的位置,建议放IE中用到的CSS文件,比如<link href="../css/ie.css" rel="stylesheet" type="text/css">,这样能避免在对方浏览器没有开启javascript的时候,无法判断浏览器类型的时候,也能以90%以上人使用的IE正常显示。

把下面这段JS放在HEAD中

<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
//如果浏览器为IE,调用../css/ie.css

setActiveStyleSheet("ie.css");
}
else{
if (window.navigator.userAgent.indexOf("Firefox")>=1
)
{
//如果浏览器为Firefox,调用../css/firefox.css

setActiveStyleSheet("firefox.css");
}
else{
//如果浏览器为其他,调用../css/other.css

setActiveStyleSheet("other.css");
}

}


function setActiveStyleSheet(title){
        document.getElementsByTagName(
"link")[0].href="../css/"+title;
//document.getElementsByTagName("link")[0].href="/blog/css/"+title; 这一行中的0是指第一个名为<link>的标签,改为1,则表示第二个名为<link>的标签。href=“”里面就是放置CSS文件的路径,而title就是CSS文件的文件名
}

//-->
</SCRIPT>

window.navigator.userAgent.indexOf后面是浏览器的类型,如果是Opera的话,还可以加一条if来判断,用javascript 的条件判断去写吧,我这里不多说了。

放好你的CSS的位置,试一下看看,是不是不同的浏览器分别调用了不同的CSS文件啊。爽!

第二种方法:

由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。

  这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

  解决的办法
  由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

  比如IE6能识别下划线_和星号*,IE7能识别星号*,当不能识别下划线_,而firefox两个都不能认识。等等

  书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。

  比如要分辨IE6和firefox两种浏览器,可以这样写:

  <style>   
  div{   
      background:green; /* for firefox */   
      *background:red;  /* for IE6 */   
  }   
  </style>   
  <div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div> 
  <style> div{  background:green; /* for firefox */    *background:red;  /* for IE6 */ } </style> <div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div>

  解释一下:

  上面的css在firefox中,它是认识不了后面的那个带星号*的东东是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。

  在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。

  区分IE6,IE7,firefox区别不同浏览器,CSS hack写法:

  区别IE6与FF:
       background:orange;*background:blue;

  区别IE6与IE7:
       background:green !important;background:blue;

  区别IE7与FF:
       background:orange; *background:green;

  区别FF,IE7,IE6:
       background:orange;*background:green !important;*background:blue;

  注:IE都能识别*;标准浏览器(如FF)不能识别*;
  IE6能识别*,但不能识别 !important,
  IE7能识别*,也能识别!important;
  FF不能识别*,但能识别!important;

   IE6 IE7 FF
  * √ √ ×
  !important × √ √

  另外再补充一个,下划线"_",
  IE6支持下划线,IE7和firefox均不支持下划线。

  于是大家还可以这样来区分IE6,IE7,firefox
  : background:orange;*background:green;_background:blue;

  注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
附:CSS的各种浏览器兼容一栏表
 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:157726次
    • 积分:2480
    • 等级:
    • 排名:第14914名
    • 原创:63篇
    • 转载:106篇
    • 译文:0篇
    • 评论:38条