IE与FF兼容性问题（转自游江南）

IE 与FF的常见兼容问题及总结

常见兼容问题：
　　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}
　　11.ul标签在Mozilla中默认是有padding值的,而在IE 中只有margin有值所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
　　注意事项：
　　1、 float的div一定要闭合。
　　   例如：(其中floatA、floatB的属性已经设置为float:left
        <#div id="floatA" ></#div>
        <#div id="floatB" ></#div>
        <#div id="NOTfloatC" ></#div>
　 　这里的NOTfloatC并不希望继续平移，而是希望往下排。
　　这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非 float标签，必须将float标签闭合。
　　在
    <#div class="floatB"></#div>
    <#div class="NOTfloatC"></#div>
　　之间加上
　　<#div class="clear"></#div>
　　这个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"></#div>
　　相应的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 这句放置在另一句之上，上面已经提过

 

    Firefox、IE对CSS的兼容性整理
    1、firefox和IE对某些css样式的认定有不少区别，包括：
    ul和ol的默认padding值是不一样的，在Firefox中，padding-left默认值为40px左右，而IE中为0，一般设置 ul{margin:0;padding:0;}就能解决大部分问题。
    并列排列的多个元素（图片或者链接）的代码中的空格和回车会造成元素之间的间隙，而在firefox中和IE中显示是不一样的，IE显示空格（约 8px）、firefox显示空格（约4px）。
    对不规范代码的兼容情况不同，IE中漏掉的关闭符号对显示不造成影响，而firefox中就会形成错乱的布局。
    firefox对于宽高尺寸的严格解析会造成与设置不匹配（超出）的图片或表格将原设置div撑大。
    未定义id的div，在IE中会与div属性中的其他设置有关，而在firefox中的位置会于div在文件中位置有关，紧随前一个div出现。
    设置为float的div在ie下设置的margin会加倍的，特别是margin-left，这是ie6的一个bug。解决的方法是在这个div里面 加上display:inline;
    如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回 事）
    FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行。IE里设置text-align:center，就居中了，但在FF中不行。所以一般两个都要设置。
    FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个height 和 width
    FF对于"!important"会自动优先解析,然而IE则会忽略.如下
    .tabd{
    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 */
    }
    FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。
    2、针对firefox ie6 ie7的css样式
    现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
    但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针
    对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
    现在写一个CSS可以这样：
    #1 { color: #333; } /* Moz */
    * html #1 { color: #666; } /* IE6 */
    *+html #1 { color: #999; } /* IE7 */
    那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
    3、firefox下多层嵌套时内层设置了浮动外层设置背景时背景不显示
    这主要是内层设置浮动后外层高度在firefox下变为0，所以应该在外层与内层间再嵌一层，设置浮动和宽
    度，然后给这个层设置背景（听说还有其他方法，感觉还是这方法好使）
    4、属性选择器(这个不能算是兼容,是隐藏css的一个bug
    p[id]{}div[id]{}
    这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
    属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

    5、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案
    <div id="parent">
    <div id="content"> </div>
    </div>
    当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案
    <div id="parent">
    <div id="content"></div>
    <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
    </div>
    在层的最下方产生一个高度为1的空格，可解除这个问题
    编写代码时：对齐时，要将对右的要写在前面。比如：
    <style>
    body{text-align:center;width:100%;}
    #center{margin:0 auto;width:800px;overflow:hidden;}/*这里是居中，超出部分隐藏*/
    .right{float:right;}/*右对齐*/
    .left{float:left;}/*左对齐*/
    .left2{float:inherit;}/*采用继承的方法*/
    #footer{clear:both;}/*清除浮动，防止与顶部层重叠*/
    </style>
    <div id="center">
    <div class="right"></div>
    <div class="left"></div>
    <div class="left2"></div>
    </div>
    <div id="footer"></div>
    －－－－－－－－－用伪类加省略号样式－－－－－－－－－－－
    比如：
    <style>

    .s_body li{list-style-type:none;}
    .s_body li a{        
                 width:300px;
             overflow:hidden;    
    text-overflow:ellipsis;
    whitewhite-space:nowrap;
             width:auto;
             line-height:150%;
             margin-left:15px;    
         }
             .s_body li a:after{
             content: "...";   }
    </style>
    <ul class="s_body">
    <li><a href="#">内容信息</a></li>
    </ul>

posted @ 2009-07-08 15:58 游江南 阅读(83) | 评论(0) | 编 辑

FF 与IE兼容性总结

1. 超链接访问过后hover样式就不出现的问题
    被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
    Code:
    <style type="text/css">
        <!--
            a:link {}
            a:visited {}
            a:hover {}
            a:active {}
        -->    
    </style>

2. FireFox下如何使连续长字段自动换行
   众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决
   Code:
    <style type="text/css">
    <!--
        div {
            width:300px;
            word-wrap:break-word;
            border:1px solid red;
        }
    -->
    </style>
    <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    Js代码
    <scrīpt type="text/javascrīpt">    
    /* <![CDATA[ */   
        function toBreakWord(el, intLen){    
            var ōbj=document.getElementById(el);    
            var strContent=obj.innerHTML;      
            var strTemp="";    
            while(strContent.length>intLen){    
                strTemp+=strContent.substr(0,intLen)+"    
";
                strContent=strContent.substr(intLen,strContent.length);      
            }
            strTemp+="
"+strContent;
            obj.innerHTML=strTemp;    
        }    
        if(document.getElementById  &&  !document.all)  toBreakWord("ff", 37);    
    /* ]]> */   
    </script>


3.ff 下为什么父容器的高度不能自适应
  在子容器加了浮动属性后,该容器将不能自动撑开,解决方法是在标签结束后加上一个清除浮动的元素。
  Code:
  clear:both;
4.IE6的双倍边距BUG
  浮动后本来外边距10px,但IE解释为20px,解决办法是加上
  Code:
  display: inline

5. IE6下绝对定位的容器内文本无法正常选择
   此问题在IE6、7中存在,解决问题的办法是让IE进入到qurks mode。关于qurks mode的相关知识,请参考:
   http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true

6. IE6下图片下方有空隙产生
   解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block
   或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom都可以解决.

7. IE6下两个层中间有间隙
   这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

8. list-style-image无法准确定位
   list-style-image的定位问题也是经常有人问的,解决的办法一般是用li的背景模拟,这里采用相对定位的方法也可以解决。

9. LI中内容超过长度后以省略号显示的方法
   此方法适用与IE与OP浏览器
   Code:
   <style type="text/css">    
    <! --     
     li {    
       width: 200px;    
       white-space:nowrap;    
       text-overflow:ellipsis;     
       -o-text-overflow:ellipsis;     
       overflow: hidden;    
       }    
    -->    
   </style>

10.web标准中定义id与class有什么区别吗
   一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以  使用他.
   二.属性的优先级问题
      ID 的优先级要高于class,看上面的例子
   三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是 相对浪费时间资源,远远不如一个ID来得简单.

11.如何垂直居中文本
   将元素高度和行高设为一致。
   Code:
   <style type="text/css">
    <!--
     div{
      height:30px;
      line-height:30px;
      border:1px solid red
     }
    -->
   </style>

12.如何对齐文本与文本输入框
  加上 vertical-align:middle;
  Code:  
  <style type="text/css">
    <!--
     input {
       width:200px;
       height:30px;
       border:1px solid red;
       vertical-align:middle;
     }
    -->
  </style>

13.FF下面不能水平居中呢
   FF下面设置容器的左右外补丁为auto就可以了
   Code:
   <style type="text/css">
     <!--
      div{
          margin:0 auto;
      }
     -->
   </style>

14.FF下文本无法撑开容器的高度
   标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
   Code:  
   {
      height:auto!important;
      height:200px;
      min-height:200px;
    }

15.IE6下容器的宽度和FF解释不同呢
   Code:
    <?xml version="1.0" encoding="gb2312"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <style type="text/css">
        <!--
        div{
            cursor:pointer;
            width:200px;
            height:200px;
            border:10px solid red
        }
        -->
        </style>
    <div ōnclick="alert(this.offsetWidth)">web标准常见问题大全</div>

    问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考:
    [url]http://www.microsoft.com/china/msdn/library/webservices/asp.net/
    ASPNETusStan.mspx?mfr=true[/url]

16.    为什么web标准中IE无法设置滚动条颜色了
    解决办法是将body换成html
    Code:  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
    <!--
    html {
            scrollbar-face-color:#f6f6f6;
            scrollbar-highlight-color:#fff;
            scrollbar-shadow-color:#eeeeee;
            scrollbar-3dlight-color:#eeeeee;
            scrollbar-arrow-color:#000;
            scrollbar-track-color:#fff;
            scrollbar-darkshadow-color:#fff;
        }
    -->
    </style>

17.    为什么我定义的样式没有作用呢
    这里你无法用.aa定义到li 遇到这种情况怎么解决呢？答案是提高.aa 的优先权 比如#aa ul li.aa
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
        <!--
        #aa ul li {
                color:red
            }
        .aa {
                color:blue
            }
        -->
    </style>    
    <div id="aa">    
    <ul>
    <li class="aa">    
        web标准常见问题大全
    </li>
    </ul>
    </div>

18.    IE6无法定义1px左右高度的容器
    IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

19.    背景颜色无法显示
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
    <!--
    ul {
            background:red
        }
    li {
            float:left;
            width:180px;
        }
    -->
    </style>
    <!--[if lte IE 6]>
    <style>
    .gainlayout { height: 1px; }
    </style>
    <![endif]-->  
    <ul class="gainlayout">
    <li>web标准常见问题大全</li>
    <li>web标准常见问题大全</li>
    <li>web标准常见问题大全</li>
    <li>web标准常见问题大全</li>
    <li>web标准常见问题大全</li>
    <div style="clear:both"></div>
    </ul>
    IE中设置有背景色的ul并没有显示出来,这个属于haslayout问题,解决的办法也很多参考 http://www.satzansatz.de/cssd/onhavinglayout.htm
    解决方法之一:
    Code:
    <!--[if lte IE 6]>
    <style>    
    .gainlayout { height: 1px; }    
    </style>    
    <![endif]-->     
    <!--[if lte IE 6]>
    <style>
    .gainlayout { height: 1px; }
    </style>
    <![endif]-->

20.    怎么样才能让层显示在FLASH之上呢
    解决的办法是给FLASH设置透明
    Code:
    <param name="wmode" value="transparent" />

21.    怎样使一个层垂直居中于浏览器中
    这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
    Code:
    <style type="text/css">    
    <!--     
    div {    
            position:absolute;    
            top:50%;    
            left:50%;    
            margin:-100px 0 0 -100px;    
            width:200px;    
            height:200px;    
            border:1px solid red;    
        }    
    -->    
    </style>

22.    图片垂直与容器内
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <style type="text/css">
    <!--
    * {margin:0;padding:0}
    div {
            width:500px;
            height:500px;
            border:1px solid #ccc;
            overflow:hidden;
            position:relative;
            display:table-cell;
            text-align:center;
            vertical-align:middle
        }
    div p {
            position:static;
            +position:absolute;
            top:50%
        }
    img {
            position:static;
            +position:relative;
            top:-50%;left:-50%;
            width:276px;
            height:110px
        }
    -->
    </style>
    <div><p><img src="logo.gif" /></p></div>

    或者使用背景图的办法:
    Code:
    background:url("logo.gif") center no-repeat;

23.    如何让div横向排列
    横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联,还可以绝对定位对象等等.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    
    <style type="text/css">    
    <!--     
    div {    
            float:left;
            width:200px;
            height:200px;
            border:1px solid red
        }
    -->
    </style>
    <div>web标准常见问题大全</div>
    <div>web标准常见问题大全</div>

    <div>web标准常见问题大全</div>

24  Firefox 关于DIV高度无法自适应的两种解决
    如果设置了一个DIV的高度，当DIV里实际内容大于所设高度，ie会自动拉伸以适应DIV容器大小，ff会固定DIV的高度，超过部分超出DIV底线以 外，
    出现和下面的内容重叠的现象。如果不给DIV设置高度，在Firefox中将不回因为里面的内容而撑开，而IE中就会自动根据内容撑开
    解决方案：
    1、在DIV内部的最后追加clear:both样式

    <div style="background-color:#FF0000;">
        <div style="float:left; height:200px">Jmedia Design</div>
        <div style="float:right; height:800px">www.jmedia.cn</div>
        <div style="clear:both"></div>
    </div>


    2、对DIV使用overflow:auto；

    <div style="overflow:auto;">
        <div style="float:left; background-color:#000000;height:200px">1111111111</div>
        <div style="float:right;background-color:#000000; height:300px"">2222222222</div>
    </div>

原文网址：http://www.cnblogs.com/youjiangnan/