让FireFox与IE兼容 CSS常见问题大全

在前端开发中，我们经常遇到浏览器的兼容性问题，特别是IE与FireFox之间。文章列举了开发人员比较常见的FireFox与IE之间的兼容性问题，同时给出了相关的解决方法。

创新互联公司致力于互联网网站建设与网站营销，提供成都网站建设、成都网站设计、网站开发、seo优化、网站排名、互联网营销、微信平台小程序开发、公众号商城、等建站开发，创新互联公司网站建设策划专家，为不同类型的客户提供良好的互联网应用定制解决方案，帮助客户在新的全球化互联网环境中保持优势。

相关阅读：CSS hack:实现IE6、IE7、Firefox兼容

1.超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A：

 
 
 
      
  
  
  1.      
    2.   
  
  
  2.      
    3.   
  
  
  3.     
    4.   
  
  
  4.  
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.

2.FireFox下如何使连续长字段自动换行

众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入 的方法来解决：

 
 
 
      
  
  
  1.      
    2.   
  
  
  2.      
    3.   
  
  
  3.      
    4.   
  
  
  4. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa     
    5.   
  
  
  5. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa     
    6.   
  
  
  6. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa     
    7.   
  
  
  7. aaaaaaaaaaaaaaaaaaaaaaaaaaa
    
  •  
  •  
  •  
  •  
  • aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
  • aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
  • aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
  • aaaaaaaaaaaaaaaaaaaaaaaaaaa
    •  
  • Java代码   
  •      
  • /* 
  • 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);     
  • /* ]]> */    
  •     
  •  
  •  
  • /* 
  • 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);  
  • /* ]]> */  
  •  

    • 3.ff下为什么父容器的高度不能自适应

    在子容器加了浮动属性后,该容器将不能自动撑开,解决方法是在标签结束后加上一个清除浮动的元素。

     
 
 
        
  
  
    1. clear: both;    
      2.   
  
  
    2. clear: both; 
      3.

    4.IE6的双倍边距BUG

    浮动后本来外边距10px,但IE解释为20px,解决办法是加上：

     
 
 
        
  
  
    1. display: inline    
      2.   
  
  
    2. display: inline 
      3.

    5. IE6下绝对定位的容器内文本无法正常选择的问题

    此问题在IE6、7中存在,解决问题的办法是让IE进入到qurks mode。

    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浏览器：

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.   
  
  
    3. li {     
      4.   
  
  
    4.     width: 200px;     
      5.   
  
  
    5.     white-space:nowrap;     
      6.   
  
  
    6.     text-overflow:ellipsis;      
      7.   
  
  
    7.     -o-text-overflow:ellipsis;      
      8.   
  
  
    8.     overflow: hidden;     
      9.   
  
  
    9.     }     
      10.   
  
  
    10. -->     
      11.   
  
  
    11.     
      12.   
  
  
    12.  
      13.   
  
  
    13.  
      14.   
  
  
    14.   
  
  
    15. li {  
      16.   
  
  
    16.     width: 200px;  
      17.   
  
  
    17.     white-space:nowrap;  
      18.   
  
  
    18.     text-overflow:ellipsis;   
      19.   
  
  
    19.     -o-text-overflow:ellipsis;   
      20.   
  
  
    20.     overflow: hidden;  
      21.   
  
  
    21.     }  
      22.   
  
  
    22. --> 
      23.   
  
  
    23.  
      24.

    #p#

    10.web标准中定义id与class有什么区别吗

    一.web标准中是不容许重复ID的。

    比如 div id="aa"  不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.

    二.属性的优先级问题。

    ID 的优先级要高于class,看上面的例子。

    三.方便JS等客户端脚本。

    如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

    11.如何垂直居中文本

    将元素高度和行高设为一致。

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.     
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.

    12.如何对齐文本与文本输入框

     
 
 
        
  
  
    1. 加上vertical-align:middle;   
      2.   
  
  
    2.  
      3.   
  
  
    3.      
      4.   
  
  
    4.      
      5.   
  
  
    5.     
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  
      9.   
  
  
    9.  
      10.

    13.为什么FF下面不能水平居中呢

    FF下面设置容器的左右外补丁为auto就可以了。

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.     
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.

    14.为什么FF下文本无法撑开容器的高度

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

     
 
 
        
  
  
    1. {     
      2.   
  
  
    2. height:auto!important;     
      3.   
  
  
    3. height:200px;     
      4.   
  
  
    4. min-height:200px;     
      5.   
  
  
    5. }    
      6.   
  
  
    6.  
      7.   
  
  
    7. {  
      8.   
  
  
    8. height:auto!important;  
      9.   
  
  
    9. height:200px;  
      10.   
  
  
    10. min-height:200px;  
      11.   
  
  
    11. }  
      12.

    15.为什么IE6下容器的宽度和FF解释不同呢

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.      
      4.   
  
  
    4.      
      5.   
  
  
    5.      
      6.   
  
  
    6.      
      7.   
  
  
    7. web标准常见问题大全
        
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • web标准常见问题大全 

    • 问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode。

    16.为什么web标准中IE无法设置滚动条颜色了

    解决办法是将body换成html：

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.      
      4.   
  
  
    4.      
      5.   
  
  
    5.     
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  
      9.   
  
  
    9.  
      10.   
  
  
    10.  
      11.   
  
  
    11.  
      12.

    #p#

    17.为什么我定义的样式没有作用呢

    这里你无法用.aa定义到li 遇到这种情况怎么解决呢？答案是提高.aa 的优先权。

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.      
      4.   
  
  
    4.      
      5.   
  
  
    5.      
      6.   
  
  
    6.      
      7.   
  
  
      7.        
  
  
      •      
        •   
  
  
      • web标准常见问题大全  
        •   
  
  
      •        
  
  
           
      8.   
  
  
    8.     
      9.   
  
  
    9.  
      10.   
  
  
    10.  
      11.   
  
  
    11.  
      12.   
  
  
    12.  
      13.   
  
  
    13.  
      14.   
  
  
    14.  
      15.   
  
  
    15.  
      16.   
  
  
      16.    
  
  
      •  
        •   
  
  
      • web标准常见问题大全  
        •   
  
  
      •    
  
  
       
      17.   
  
  
    17.  
      18.

    18.为什么无法定义1px左右高度的容器

    IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:

     
 
 
        
  
  
    1. overflow:hidden | zoom:0.08 | line-height:1px
      2.   
  
  
    2.   
      3.

    19.为什么这个背景颜色无法显示

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.      
      4.   
  
  
    4.      
      5.   
  
  
    5.      
      6.   
  
  
    6.        
      7.   
  
  
    7.      
      8.   
  
  
    9. web标准常见问题大全
      10.        
  
  
    11. web标准常见问题大全
      12.        
  
  
    13. web标准常见问题大全
      14.        
  
  
    15. web标准常见问题大全
      16.        
  
  
    17. web标准常见问题大全
      18.        
  
  
    18.      
      19.   
  
  
    19.     
      20.   
  
  
    20.  
      21.   
  
  
    21.  
      22.   
  
  
    22.  
      23.   
  
  
    23.  
      24.   
  
  
    24.  
      25.   
  
  
    25.  
      26.   
  
  
    26.     
      27.   
  
  
    27.  
      28.   
  
  
    29. web标准常见问题大全
      30.    
  
  
    31. web标准常见问题大全
      32.    
  
  
    33. web标准常见问题大全
      34.    
  
  
    35. web标准常见问题大全
      36.    
  
  
    37. web标准常见问题大全
      38.    
  
  
    38.  
      39.   
  
  
    39.  
      40.   
  
  
    40.  
      41.   
  
  
    41.       
      42.   
  
  
    42.  
      43.   
  
  
    43.    
      44.

    20.怎么样才能让层显示在FLASH之上呢

     
 
 
        
  
  
    1. 解决的办法是给FLASH设置透明：  
      2.   
  
  
      3.   
  
  
    3.   
      4.

    21.怎样使一个层垂直居中于浏览器中

    这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二：

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.     
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.

    22 .图片垂直与容器内

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.      
      4.   
  
  
    4.      
      5.   
  
  
    5.     
      6.   
  
  
    6.  
      7.   
  
  
    7.  
      8.   
  
  
    8.  
      9.   
  
  
    9.  
      10.   
  
  
    10.  
      11.   
  
  
    11.  
      12.

    或者使用背景图的办法:

     
 
 
        
  
  
    1. background:url("logo.gif") center no-repeat; 
      2.   
  
  
    2.  
      3.

    23.如何让div横向排列

    横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联,还可以绝对定位对象等等。

     
 
 
        
  
  
    1.      
      2.   
  
  
    2.      
      3.   
  
  
    3.      
      4.   
  
  
    4.      
      5.   
  
  
    5.   
      6.

    【编辑推荐】

    1. CSS规范：你真的了解盒模型吗？
    2. DIV+CSS中常见十大错误总结
    3. CSS hack:实现IE6、IE7、Firefox兼容 

    网页名称：让FireFox与IE兼容 CSS常见问题大全
    网页URL：http://www.shufengxianlan.com/qtweb/news28/80928.html

    成都网站建设公司_创新互联，为您提供网站营销、App开发、定制开发、外贸网站建设、响应式网站、网站制作

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网站建设知识

    同城分类信息

    全网品牌营销　　 　腾讯香港空间　　 　乐山石膏隔墙　　 　广安园林景观设计　　 　二枢服务器托管　　 　正泰动物制药　　 　成都二枢机房　　 　宜宾网站建设　　 　微信小程序　　 　网站制作公司　　 　四川中建建业　　 　邛崃做网站　　 　广元双南建站　　 　成都定制网站　　 　传美奇电器　　 　高县网站建设　　 　成都画册快印　　 　网站制作价格　　 　犀浦门窗定制　　 　成都服务器租用