zoukankan      html  css  js  c++  java

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

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

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

    1. <style type="text/css">
    2.      <!--
    3.          a:link {}
    4.          a:visited {}
    5.          a:hover {}
    6.          a:active {}
    7.      -->    
    8. </style>

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

    1. <styletype="text/css">
    2. <!--
    3.      div {
    4.          300px;
    5.          word-wrap:break-word;
    6.          border:1px solid red;
    7.      }
    8. -->
    9. </style>
    10. <divid="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    11. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    12. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    13. aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

        Js代码

    1.      <scrīpt type="text/javascrīpt">    
    2.     /* <![CDATA[ */   
    3.         function toBreakWord(el, intLen){    
    4.             var ōbj=document.getElementById(el);    
    5.             var strContent=obj.innerHTML;      
    6.             var strTemp="";    
    7.             while(strContent.length>intLen){    
    8.                  strTemp+=strContent.substr(0,intLen)+"    
    9. ";
    10.                  strContent=strContent.substr(intLen,strContent.length);      
    11.              }
    12.              strTemp+="
    13. "+strContent;
    14.              obj.innerHTML=strTemp;    
    15.          }    
    16.         if(document.getElementById   &&   !document.all)   toBreakWord("ff", 37);    
    17.     /* ]]> */   
    18.      </script>

    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. <styletype="text/css">    
    2. <! --     
    3.    li {    
    4.      200px;    
    5.      white-space:nowrap;    
    6.      text-overflow:ellipsis;     
    7.      -o-text-overflow:ellipsis;     
    8.      overflow: hidden;    
    9.      }    
    10. -->    
    11. </style>


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

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

    1. <style type="text/css">
    2. <!--
    3.    div{
    4.    height:30px;
    5.    line-height:30px;
    6.    border:1pxsolidred
    7.    }
    8. -->
    9. </style>

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

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

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

    1. <style type="text/css">
    2.    <!--
    3.     div{
    4.        margin:0auto;
    5.     }
    6.    -->
    7. </style>

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

    1. {
    2.    height:auto!important;
    3.    height:200px;
    4.    min-height:200px;
    5. }

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

    1. <?xmlversion="1.0"encoding="gb2312"?>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <metahttp-equiv="Content-Type"content="text/html; charset=gb2312"/>
    4.     <styletype="text/css">
    5.      <!--
    6.      div{
    7.          cursor:pointer;
    8.          200px;
    9.          height:200px;
    10.          border:10px solid red
    11.      }
    12.      -->
    13.     </style>
    14. <div ōnclick="alert(this.offsetWidth)">web标准常见问题大全</div>

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


    //成功一定有方法，失败一定有原因。
  • 相关阅读:
    简单明了的带你理解springboot原理和三大核心注解
    Spring Boot(一)：入门篇
    【Mysql优化】聚簇索引与非聚簇索引概念
    Mysql索引原理与优化
    Mysql全文索引的使用
    索引的优缺点，如何创建索引
    184 01 Android 零基础入门 03 Java常用工具类03 Java字符串 02 String类 04 例：字符串与byte（即：字节）数组间的相互转换
    183 01 Android 零基础入门 03 Java常用工具类03 Java字符串 02 String类 03 String常用方法（下）
    182 01 Android 零基础入门 03 Java常用工具类03 Java字符串 02 String类 02 String常用方法（上）
    181 01 Android 零基础入门 03 Java常用工具类03 Java字符串 02 String类 01 String常用方法简介
  • 原文地址：https://www.cnblogs.com/webapi/p/2425968.html
Copyright © 2011-2022 走看看