zoukankan      html  css  js  c++  java
  • IE与Firefox的CSS兼容

    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 特别设置样式,值得注意的是,一定要将xxxx !important 这句放置在另一句之上
      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{300px;margin:0 10px 0 10px;}
      div的宽度会被解释为300px-10px(右填 充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填 充)=320px来计算的。这时我们可以做如下修改div{300px!important;width /**/:340px;margin:0 10px 0 10px}
      关于这个/**/是什么我也不太明白,只知道IE5和firefox都支 持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)

      11.ul标签在Mozilla中默认是有padding值的,而在 IE中只有margin有值所以先定义ul{margin:0;padding:0;}
      就能解决大部分问题

      
        注 意事项:

      1、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\">
      之间加 上<#div class=\"clear\">
      这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有 float属性的div同级,之间不能存在嵌套关系,否则会产生异常。
      并且将clear这种样式定义为为如下即可:.clear{
    clear:both;}
       此外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden;
      当包含float的box的时候,高度自动适应 在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。
      例如某一个 wrapper如下定义:.colwrapper{
    overflow:hidden;
    zoom:1;
    margin:5px auto;}

      2、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 这句放置在另一句之上,上面已经提过
  • 相关阅读:
    417 Pacific Atlantic Water Flow 太平洋大西洋水流
    416 Partition Equal Subset Sum 分割相同子集和
    415 Add Strings 字符串相加
    414 Third Maximum Number 第三大的数
    413 Arithmetic Slices 等差数列划分
    412 Fizz Buzz
    410 Split Array Largest Sum 分割数组的最大值
    409 Longest Palindrome 最长回文串
    day22 collection 模块 (顺便对比queue也学习了一下队列)
    day21 计算器作业
  • 原文地址:https://www.cnblogs.com/linyefeilyft/p/1757678.html
Copyright © 2011-2022 走看看