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

09年06月21日

我们针对不同的浏览器开发出不同的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

clip_image001<SCRIPT LANGUAGE="JavaScript">
clip_image001<!–
clip_image001
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");
}

}
clip_image001
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文件的文件名
}
clip_image001
//–>
clip_image001
</SCRIPT>

clip_image001

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写在后面。下面如何写里面说得更详细些。

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

<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>

解释一下:

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

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

区分IE6IE7firefox区别不同浏览器,CSS hack写法:

区别IE6FF
       background:orange;*background:blue;

区别IE6IE7
       background:green !important;background:blue;

区别IE7FF
       background:orange; *background:green;

区别FFIE7IE6
       background:orange;*background:green !important;*background:blue;

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

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

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

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

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






相关文章:

  1. 同步 WordPress 到 Qzone。
  2. 如何让不同浏览器调用不同的CSS样式
  3. 如何在WORDPRESS中使代码高亮
  4. 国外1500M免费空间000webhost申请攻略
  5. Zend Studio 实用快捷键一览表



  • 原文链接: http://www.astesys.com/website/webapp/594.html
  • 转载文章请注明: 爱思特
  • Tags: 分类: 网站应用

    [CSS对IE7,IE6,FireFox和其它不同浏览器的控制(转)]共有:10 条评论

  • Jenna :

    Pretty cool post. I just came by your site and wanted to say
    that I have really liked browsing your posts. Any way
    I’ll be subscribing to your blog and I hope you write again soon!

  • tyqhaha :

    楼主,你这个网站貌似好久不用了哦,不知道有没有收到我youku上发给你的信件呢?我的MSN是luis.tang@hotmail.com

  • tyqhaha :

    交流一下,呵呵~~

  • 记忆 :

    回返,呵呵。有空记得去我那踩踩哦?

  • lavender :

    精彩博文,顶一下。有空记得去我那踩踩哦?

  • 种草人 :

    我喜欢夜晚行动,呵呵。挺有风格的博客,顶一下。

  • 病毒性感冒 :

    你的博客搞真好!

  • lavender :

    Beautiful.It’s an excellent article.Support it.

  • 发表评论