思享工具箱

火狐与IE兼容性总结(一)

摘要：
兼容性一直是一个令人头疼的问题。以下是Firefox和IE之间兼容性的简要概述；4.IE6的双倍边距BUG浮动后，原始的外边距为10px，但IE将其解释为20px。解决方案是添加display:inline5。无法正常选择绝对位于IE6下的容器中的文本。IE6和IE7中存在此问题。解决方案是让IE进入qurksmode。

兼容性一直都是个令人头痛的问题，下面简单总结火狐与IE的兼容性问题。

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

    

  1. <style type="text/css">  
    2. 

  2.      <!--   
    3. 

  3.          a:link {}  
    4. 

  4.          a:visited {}  
    5. 

  5.          a:hover {}  
    6. 

  6.          a:active {}  
    7. 

  7.      -->       
    8. 

  8. </style> 
    9.

2. FireFox下如何使连续长字段自动换行
   众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决 

    

  1. <style type="text/css"> 
    2. 

  2. <!--   
    3. 

  3.      div {  
    4. 

  4.          300px;  
    5. 

  5.          word-wrap:break-word;  
    6. 

  6.          border:1px solid red;  
    7. 

  7.      }  
    8. 

  8. 
--> 

    9. 

  9. 
</style> 

    10. 

  10. 
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  

    11. 

  11. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
    12. 

  12. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
    13. 

  13. 
aaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 

    14.

    Js代码

    

  1.      <scrīpt type="text/javascrīpt">       
    2. 

  2. 
    /* <![CDATA[ */      

    3. 

  3. 
        function toBreakWord(el, intLen){       

    4. 

  4. 
            var ōbj=document.getElementById(el);       

    5. 

  5. 
            var strContent=obj.innerHTML;         

    6. 

  6. 
            var strTemp="";       

    7. 

  7. 
            while(strContent.length>intLen){       

    8. 

  8.                  strTemp+=strContent.substr(0,intLen)+"       
    9. 

  9. ";  
    10. 

  10.                  strContent=strContent.substr(intLen,strContent.length);         
    11. 

  11.              }  
    12. 

  12.              strTemp+="  
    13. 

  13. "+strContent;  
    14. 

  14.              obj.innerHTML=strTemp;       
    15. 

  15.          }       
    16. 

  16. 
        if(document.getElementById   &&   !document.all)   toBreakWord("ff", 37);       

    17. 

  17. 
    /* ]]> */      

    18. 

  18.      </script> 
    19.

3.ff下为什么父容器的高度不能自适应
在子容器加了浮动属性后,该容器将不能自动撑开,解决方法是在标签结束后加上一个清除浮动的元素。 

  1. clear:both;

4.IE6的双倍边距BUG
浮动后本来外边距10px,但IE解释为20px,解决办法是加上

  1. display: inline

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

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. <style type="text/css">       
    2. 

  2.  <! --        
    3. 

  3.    li {       
    4. 

  4.       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. 
</style> 

    12.


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

11.如何垂直居中文本
   将元素高度和行高设为一致。 

    

  1. <style type="text/css">  
    2. 

  2.  <!--   
    3. 

  3.    div{  
    4. 

  4. 
   height:30px;  

    5. 

  5. 
   line-height:30px;  

    6. 

  6. 
   border:1px solid red 

    7. 

  7.    }  
    8. 

  8.  -->  
    9. 

  9. </style> 
    10.

12.如何对齐文本与文本输入框
加上 vertical-align:middle;

  1. <style type="text/css">
  2.    <!--
  3.     input {
  4.      width:200px;
  5.      height:30px;
  6.      border:1pxsolidred;
  7.      vertical-align:middle;
  8.     }
  9.    -->
  10. </style>

13.FF下面不能水平居中呢
   FF下面设置容器的左右外补丁为auto就可以了

    

  1. <style type="text/css">  
    2. 

  2.    <!--   
    3. 

  3.     div{  
    4. 

  4. 
       margin:0 auto;  

    5. 

  5.     }  
    6. 

  6.    -->  
    7. 

  7. </style>  
    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.

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

    

  1. <?xml version="1.0" encoding="gb2312"?> 
    2. 

  2. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

    3. 

  3. 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

    4. 

  4. 
    <style type="text/css"> 

    5. 

  5.      <!--  
    6. 

  6.      div{  
    7. 

  7.          cursor:pointer;  
    8. 

  8.          200px;  
    9. 

  9.          height:200px;  
    10. 

  10.          border:10px solid red  
    11. 

  11.      }  
    12. 

  12. 
     --> 

    13. 

  13. 
    </style> 

    14. 

  14. 
<div ōnclick="alert(this.offsetWidth)">web标准常见问题大全</div> 

    15.

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

转自一朋友博客：http://hi.baidu.com/dpxdqx/blog/item/6f995f2e72af62594fc2268e.html

标签：#ie#火狐浏览器#容器 | 浏览：432 | 发布日期：

免责声明：文章转载自《火狐与IE兼容性总结(一)》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇python—mysql小结Homebrew 安装与配置 || 换源、卸载、常用命令、brew cask下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

关于Spring注解开发教程，打包全送你

摘要：spring是我们web开发中必不可少的一个框架，基于传统的xml方式配置bean总觉得太过繁琐，从spring2.5之后注解的出现可以大大简化我们的配置。 本文分享自华为云社区《如何高效提升Java开发效率—Spring注解开发全套教程！》，作者： 灰小猿。 一、使用注解标识组件 为了不再在IOC中一个个的声明类对象，首先根据每一个类的功能的不同...

常见的IE浏览器的一些兼容问题及解决方法

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 碰到频率:100% 解决方案：CSS里    *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签...

apache安装时的一些术语

apache源码安装时,需要的哪些必须依赖模块? 主要需要apr, apr-util, pcre模块其中 apr模块时必须的. 如何卸载 源码安装的软件? 在源码 的 解压目录下, 使用 make uninstall/ make clean, make distclean 直接将 安装在--prefix目录下的文件全部都删除掉即可! 使用 --prefi...

Docker容器日志查看与清理（亲测有效）

 https://blog.csdn.net/yjk13703623757/article/details/80283729 1. 问题 docker容器日志导致主机磁盘空间满了。docker logs -f container_name噼里啪啦一大堆，很占用空间，不用的日志可以清理掉了。  2. 解决方法 2.1 找出Docker容器日志 在...

Docker安装Redis，让宿主机可以访问

一、拉取镜像 docker pull redis #后面可以带上tag号, 默认拉取最新版本 二、查看镜像 docker images #查看容器中的镜像 三、启动并做映射（以配置文件方式启动） 1、创建配置文件目录存放redis.conf，文件从官网下载：http://download.redis.io/redis-stable/redis.conf...

Minikube之Win10单机部署Kubernetes（k8s）自动化容器操作的开源平台

Minikube之Win10单机部署Kubernetes（k8s）是自动化容器操作的开源平台，基于这个平台，你可以进行容器部署，资源调度和集群扩容等操作。如果你曾经用过Docker部署容器，那么可以将Docker看成Kubernetes底层使用的组件，Kubernetes是Docker的上层封装，通过它可以很方便的进行Docker集群的管理。今天我们使用m...

最新文章

随机推荐

思享工具箱导航