惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

酷 壳 – CoolShell
酷 壳 – CoolShell
T
Threatpost
Latest news
Latest news
N
News | PayPal Newsroom
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Help Net Security
Help Net Security
D
Darknet – Hacking Tools, Hacker News & Cyber Security
AI
AI
Simon Willison's Weblog
Simon Willison's Weblog
TaoSecurity Blog
TaoSecurity Blog
The Last Watchdog
The Last Watchdog
L
LINUX DO - 热门话题
Google DeepMind News
Google DeepMind News
T
Threat Research - Cisco Blogs
O
OpenAI News
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
The Exploit Database - CXSecurity.com
NISL@THU
NISL@THU
Application and Cybersecurity Blog
Application and Cybersecurity Blog
S
Securelist
小众软件
小众软件
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Martin Fowler
Martin Fowler
S
SegmentFault 最新的问题
Cisco Talos Blog
Cisco Talos Blog
云风的 BLOG
云风的 BLOG
AWS News Blog
AWS News Blog
GbyAI
GbyAI
N
News and Events Feed by Topic
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
美团技术团队
Engineering at Meta
Engineering at Meta
A
About on SuperTechFans
博客园 - 三生石上(FineUI控件)
S
Schneier on Security
博客园 - 聂微东
V2EX - 技术
V2EX - 技术
T
Troy Hunt's Blog
SecWiki News
SecWiki News
S
Secure Thoughts
B
Blog RSS Feed
Hugging Face - Blog
Hugging Face - Blog
WordPress大学
WordPress大学
腾讯CDC
H
Heimdal Security Blog
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
Apple Machine Learning Research
Apple Machine Learning Research
月光博客
月光博客
www.infosecurity-magazine.com
www.infosecurity-magazine.com
P
Privacy International News Feed

博客园 - 海纳百川

[转]Win 2003开关机优化技巧两则 - 海纳百川 - 博客园 “错误: 无法读取页脚文件。”问题的解决 qqsafe病毒 arp网站挂马 原理剖析-786ts.qqsafe-qqservicesyydswfhuw8ysjftwf.org(转载) - 海纳百川 ASP漏洞防范(转) ASP 修改文件的属性——把文件的由可读修改为只读 SERV-U 7 的安装和基本使用方法教程 “MIDI机器狗”的木马正在疯狂传播 如何让百度收录网站的图片 新中的ddd.luobotebaqiao.org/ddddd.htm网页木马,期待彻底解决方法 如何远程访问VSS,方便在家做开发工作? 如何做web2.0营销 大卫叫板刘韧 短信相关知识整理 系统不能正常关机——win2003 server 不能正常关机 JS实现sleep功能 JS遍历document对象 用命令导入导出MS SQL数据 经典正则表达式——常用的正则表达式 Web 2.0的八个核心模式与成功技巧 .net 数据格式设置大全
CSS对IE7,IE6,FireFox和其它不同浏览器的控制(转)
海纳百川 · 2008-11-04 · via 博客园 - 海纳百川

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

<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 的条件判断去写吧,我这里不多说了。

由于不同的浏览器,比如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的各种浏览器兼容一栏表