设为首页收藏本站

兄弟外汇论坛|股票论坛|期货论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

搜索
查看: 4034|回复: 2

JS按照 IE7,IE6,FireFox浏览器调用不同的css

  [复制链接]
发表于 2010-12-12 04:22:32 | 显示全部楼层 |阅读模式
JS按照 IE7,IE6,FireFox浏览器调用不同的css范式我们针对于不同的浏览器研发出不同的CSS文件,一个针对于IE,一个针对于Firefox,一个针对于其它所有类型的浏览。这样,我们在设计时,就不用去思量太多,只要我这个CSS能在FF中正常显示,我就不管IE下执行下怎么样了,同样IE中正常的CSS,也不去管它在FF中会是显示怎样的乱。

首先,我们在HTML代码里要放入标签,标签里先写入默许要用到的CSS文件的位置,提议放IE中用到的CSS文件,好比,这样能制止在对于方浏览器没有开启javascript的时辰,无法判断浏览器类型的时辰,也能以90%以上人使用的IE正常显示。

把下面最近JS放在HEAD中





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是指第一个名为的标签,改为1,则表示第二个名为的标签。href=“”里面就是放置CSS文件的路径,而title就是CSS文件的文件名

}



//-->



第二种要领:

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

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

解决的措施

因为不同的浏览器对win7 淡入淡出于CSS的支持及剖析成果不一样,还因为CSS中的优先级的关系。我们就能够按照这个来针对于不同的浏览器来写不同的CSS。

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

书写挨次,一般是将识别能力强的浏览器的CSS写在后面。下面怎样写里面说得更具体些。

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

我在IE6入眼到是红色的,在firefox入眼到是绿色的。

我在IE6入眼到是红色的,在firefox入眼到是绿色的。

诠释一下:

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

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

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

区别IE6与FF:

backgroundrange;*background:blue;

区别IE6与IE7:

background:green !important;background:blue;

区别IE7与FF:

backgroundrange; *background:green;

区别FF,IE7,IE6:

backgroundrange;*background:green !important;*background:blue;

注:IE都能识别*;标准浏览器(如FF)不能识别*;

IE6能识别*,但不能识别 !important,

IE7能识别*,也能识别!important;FF不能识别*,但能识别!important;

IE6 IE7 FF

*√√×

!important ×√√

另外再补充一个,下划线"_",

IE6支持下划线,IE7和firefox均不支持下划线。

于是各人还可以这样来区分IE6,IE7,firefox

: backgroundrange;*background:green;_background:bl ue;

注:不管是什么要领,书写的挨次都是firefox的写率先,IE7的写在中心,IE6的写在最后面。
回复

使用道具 举报

发表于 2017-4-1 18:15:11 | 显示全部楼层
谢谢您阿,我非常高兴
回复 支持 反对

使用道具 举报

发表于 2017-5-19 07:08:44 | 显示全部楼层
请问大家有什么看法?我绝对喜欢这个帖子
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|手机版|Archiver|兄弟财经    

GMT+8, 2017-6-29 04:44 , Processed in 0.536134 second(s), 19 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表