zoukankan      html  css  js  c++  java
  • CSS对IE7,IE6,FireFox和其它不同浏览器的控制(转)

       我们针对不同的浏览器开发出不同的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的写在最后面。

  • 相关阅读:
    PAT 甲级 1115 Counting Nodes in a BST (30 分)
    PAT 甲级 1114 Family Property (25 分)
    PAT 甲级 1114 Family Property (25 分)
    Python Ethical Hacking
    Python Ethical Hacking
    Python Ethical Hacking
    Python Ethical Hacking
    Python Ethical Hacking
    Python Ethical Hacking
    Python Ethical Hacking
  • 原文地址:https://www.cnblogs.com/xiaolei1314/p/3102628.html
Copyright © 2011-2022 走看看