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

原创 2007年09月21日 10:48:00
就是通过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的各种浏览器兼容一栏表
 

当下主流浏览器IE6、IE7 、IE8、Firefox、Chrome、Safari、Opera

点击打开链接 www.fadi06.com ie 是微软的新版本Windows操作系统的一个组成部分。在旧版的操作系统上,它是独立、免费的。从Windows 95 OSR2开始,它被捆绑作为所有新...
  • u012848276
  • u012848276
  • 2013年12月10日 16:51
  • 529

IE6IE7Firefox浏览器不兼容原因及解决办法

IE6IE7Firefox浏览器不兼容原因及解决办法     一、IE6IE7Firefox浏览器不兼容原因及解决办法 1.文字 本身的大小不兼容。同样是font-s...
  • yuwq123
  • yuwq123
  • 2016年08月13日 11:57
  • 1065

margin-bottom在IE6和IE7下失效的解决办法

这对于margin-top也同样适用!!! 今天在处理页面边距时,又遇到这个问题,float元素在设定margin-bottom时在IE6和IE7下会失效,之前就碰到过,但是用其他的办法调试会就过去...
  • ximenxiafeng
  • ximenxiafeng
  • 2013年05月01日 00:32
  • 10068

IE6 浏览器常见兼容问题 大汇总

以下全文载自独行冰海 IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB...
  • huangyibin628
  • huangyibin628
  • 2014年03月12日 09:32
  • 2116

【CSS】ie6 ie7 ie8 共存以及Firefox浏览器CSS兼容写法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!海量权威开发资...
  • CDLucifer
  • CDLucifer
  • 2013年03月18日 22:11
  • 693

应用before/after伪类时如何CSS命名以及针对ie6/ie7浏览器兼容

一、诉说前言  before/after伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪...
  • sbt0198
  • sbt0198
  • 2015年06月24日 14:55
  • 1333

ie6, ie7兼容性问题以及处理办法汇总

1、IE6中绝对定位位置错误 问题描述:在ie6中,如果参照物没有触发haslayout ,那么绝对定位的容器的left和bottom就会有问题。 解决办法:在相对定位的父容器上加入 zoom:1 来...
  • zdp072
  • zdp072
  • 2014年03月30日 18:03
  • 3013

Javascript获取页面各种宽度高度(各种浏览器ie6,ie7,firefox下怎么获取更好兼容)

关于获取各种浏览器可见窗口大小的一点点研究,这里面有些在兼容性不是很好,请看后面的介绍。 function getInfo() {     var s = "";     s += " 网...
  • junmoxie
  • junmoxie
  • 2014年04月22日 16:44
  • 1999

CSS hack:针对IE6,IE7,firefox显示不同效果

区别不同浏览器的CSS hack写法: 区别IE6与FF:         background:orange;*background:blue; 区别IE6与IE7:    ...
  • u010397246
  • u010397246
  • 2013年12月31日 11:49
  • 679

CSS hack 针对IE6,IE7,firefox显示不同效果

转http://www.jb51.net/css/25558.html 区别不同浏览器的CSS hack写法:  区别IE6与FF:          background:orange...
  • fendou4533
  • fendou4533
  • 2013年08月13日 16:47
  • 474
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS对IE7,IE6,FireFox和其它不同浏览器的控制
举报原因:
原因补充:

(最多只允许输入30个字)