全面兼容ie6,ie7,ie8,ff的最简单的css写法

技术攻关 2015-01-13 鸿茂传媒 68

     浏览器市场的混乱,给设计师造成很大的麻烦,设计的页面兼容完这个浏览器还得兼容那个浏览器,本来ie6跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点,ie8的出现就更头疼了,原来hack ie7的方法又不能用了,怎么办呢?

     第一种方法:


    还好,微软提供了这样一个代码:
 

    把这段代码放到

 

    里面,在ie8里面的页面解析起来就跟ie7一模一样的了,所以,基本上可以无视ie8,剩下的代码只需要这样写就可以了

    1. background:#ffc; /*   对firefox有效*/


    2. *background:#ccc; /* 对ie7有效 */


    3. _background:#000; /* 只对ie6有效 */

     解释一下吧:

     firefox能解析第一段,后面的两个因为前面加了特殊符号“*”和“_”,firefox认不了,所以只认background:#ffc,看到的是黄色;

     ie7前两短都能认,以最后的为准,所以最后解析是background:#ccc,看到的是灰色;

     ie6三段都能认,而且“_”这个只有ie6能认,所以最后解析是_background:#000,看到的是黑色

     ie8的那段兼容7的代码我也测试过了,在我现在的windos 7 测试版所带的ie8是没问题的,以后ie8正式版出来还管不管用就不知道了。


     这个是现在比较规范的写法,如果你是用dreamweaver做页面的话,默认也是这种规范的,切记,非这种规范写法的,兼容性不能保证

     第二种方法:


     要求苛刻的朋友是不愿意在页面头部增加

 

 

    这样一句代码的,因为这样的结果是每个页面都得加。那么要想兼容这几个浏览器还真得想别的办法了。早些天本站发布了一篇《完美兼容 ie6,ie7,ie8以及firefox的css透明滤镜》,可能当时测试的疏忽,IE8的兼容性没有解决好,好多朋友回复说用不了。今天抽出些时间,查阅大量资料,终于解决了这个问题了。
以下是兼容IE6/IE7/IE8/FF的写法,注意下面的顺序不可颠倒

   1. margin-bottom:40px; /*ff的属性*/


   2. margin-bottom:140px/9; /* IE6/7/8的属性 */


   3. color:red/0; /* IE8支持 */


   4. *margin-bottom:450px; /*IE6/7的属性*/
 

      CSS兼容IE6,IE7,FireFox之一

      关于CSS对各个浏览器兼容是个非常让人头疼的事情了, 网络上的教程遍地都是.今天在discuz.net上发现了一篇不错的东西,就转载过来和大家共享.可以当作CSS兼容IE6,IE7,FireFox典范了,值得去记录下。发现自己很久没有转载东西。

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

      写两句代码来控制一个属性,区别Firefox与IE6:


      background:orange;*background:blue;

      //这一句代码写出来时,你用firefox或其它非IE浏览时,会发现,写了该代码的区域背景是橙色的,如果用IE浏览,却是蓝色的,这是因为IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*;

      写两句代码来控制一个属性,区别IE7与IE6:


      background:green !important;background:blue;

      //这一句代码写出来时,你用IE7浏览,会发现,写了该代码的区域背景是绿色的,如果用IE6浏览,却是蓝色的,这是因为IE7能识别!important*,一但识别了,就执行,忽略了后面的那一句,但IE6却不能识别!important,所以前面部分跳过,直接执行了后半部份。

      写两句代码来控制一个属性,区别Firefox与IE:


      background:orange; *background:green;

      //这一句代码写出来时,你用Firefox浏览,会发现背景是橙色的,而IE里却是绿色的,很简单,因为Firefox不能识别*,而IE6,IE7都可以识*

      写三句代码来控制一个属性,区别Firefox,IE7,IE6:


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

      //这一句会使在Firefox在,背景呈橙色,IE7中为绿色,IE6中为蓝色,道理和前面一样,Firefox不能识别*,所以后面两句都不执行,直接执行第一句,IE7当然也能执行第一行代码,但是因为第二句,他也能识别,所以就执行了第二句代码,把前面的效果给过滤了,而最后一句,IE7是不能识别的。IE6不能识别!imprtant,本来运行了第一句代码了,第二句不能识别,那就理所当然的执行了最后一句。

      注意事项:

        float的div一定要闭合。

        例如:(其中floatA、floatB的属性已经设置为float:left;)


        < #div id="floatA" >


        < #div id="floatB" >


        < #div id="NOTfloatC" >

       这里的NOTfloatC并不希望继续平移,而是希望往下排。


       这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。
        

       在


       < #div class="floatB">


       < #div class="NOTfloatC">

      之间加上


      1. < #div class="clear">

     这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。


      并且将clear这种样式定义为为如下即可:


      clear{clear:both;}

      此外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden;


      2、当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。


      例如某一个wrapper如下定义:


     .colwrapper{overflow:hidden;zoom:1;margin:5px auto;}

      margin加倍的问题。

      设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。


      解决方案是在这个div里面加上display:inline;

 

      例如:


      < #div id="imfloat">

      相应的css为


      #IamFloat{


      float:left;


     margin:5px;/*IE下理解为10px*/


     display:inline;/*IE下再理解为5px*/}

     3、关于容器的包涵关系

     很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。在IE中,外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

     4、关于高度的问题

     如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。(似乎有时候不会自动往下撑开,不知道具体怎么回事)

     5、最狠的手段 - !important;

     如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下


     .tabd1{


      background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/


      background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}


      值得注意的是,一定要将xxxx !important 这句放置在另一句之上,上面已经提过

      常见兼容问题:

      1.DOCTYPE 影响 CSS 处理

      2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

      3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

      4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

      5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

      6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行

      7.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

      8.FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

      9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:


      div{margin:30px!important;margin:28px;}


      注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:


      div{maring:30px;margin:28px}


      重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

      10.IE5 和IE6的BOX解释不一致
     

      IE5下


      div{width:300px;margin:0 10px 0 10px;}


      div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改


      div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}


      关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)


      11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义


      ul{margin:0;padding:0;}


      就能解决大部分问题

【版权与免责声明】如发现内容存在版权问题,烦请提供相关信息发邮件至admin@honmau.com,我们将及时沟通与处理。本站内容除非来源注明鸿茂传媒,否则均为网友转载,涉及言论、版权与本站无关。点击进入客服处理
广告
热门推荐
鸿茂传媒旗舰店
乐清生活网微信
乐清生活网官方微信
近期,想定制开发一个网站
提交需求
Copyright © 2009-2019 honmau.com 鸿茂传媒 版权所有  浙ICP备11041680号-4 浙公网安备 33038202002006号