zoukankan      html  css  js  c++  java

  • IE6,7,8,FF兼容总结

    做到浏览器兼容需要注意的四大要素(一)
    2009-05-31 17:09

    1 Css

    1.1 选择器

    • 通配符 * :: IE6不支持
    • 类选择器 .class :: IE6元素的class不能超过2个
    • 属性选择器 [att=value] [att] [att|=value] [att(^|$|~)=value] :: IE6不支持
    • 关系选择器 E + F; E > F ; E ~ F :: IE6不支持

    1.2 伪类

    • :first-letter,:first-line,:visited,:link :: 都支持
    • :hover :: IE6只支持A元素，IE7及FF支持A以外元素
    • :before和:after :: IE7和firefox支持，好好利用可以实现很多不错的效果

    1.3 !IMPORTANT

    • 突破样式表属性>ID>双CLASS>单CLASS>元素,后者>前者的层叠顺序,不过IE6不支持

    1.4 DocType

    文档类型决定了IE的渲染模式，标准模式(standard)还是兼容模式(quirks),并且声明必须放在所有代码之前,包括注释。<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    查看详情Quirks模式与Standards模式

    • 盒模型 标准模式,实际宽度=width+border-width+padding-width+margin-width 兼容模式下,实际宽度=width
    • 水平居中 IE中,标准模式下可使用margin:0 auto水平居中。兼容模式下无效。
    • 行内元素尺寸 标准模式下不能设置span等行内元素的width和height，兼容模式下可以。
    • 不正确的语法 譬如未书写尺寸单位，大小写不正确，嵌套不正确等，兼容模式下尺寸采用默认单位px，其它的都尽量修正。标准模式下这条css规则无效。
    • 相对高度 元素设定百分比高度时，需要父元素高度已指定，所以最好先指定html和body元素高度为100%
    • IE7的新CSS特性 min/max-width/height,position:fixed,:hover,overflow:visible 等在兼容模式下会失效。
    • 默认样式 FF下，在进入quirks模式后，会加载其目录下的res/quirk.css，设置一些其它的默认样式

    1.5 属性

    • Z-INDEX SELECT元素浮动在其它元素的上方，不能改变z-index，必要的时候采用js来控制select的显隐达到需要的效果 FLASH默认的wmode为window模式，浮动在其它html元素的上方，指定z-index不会改变这种情况。需要将wmode指定为transparent或者opaque
    • CURSOR FF 不支持cursor:hand,使用cursor:pointor
    • 列表取消缩进 IE margin:0;FF padding:0
    • 自动折行
      • DIV 
         1 .wrap1 {
                         2     word-break:break-all;
                         3     word-warp:warp;
                         4     over-flow:auto!important;
                         5     }
                         6 .wrap2 {
                         7     white-spacing:normal;
                         8     word-warp:warp;
                         9     over-flow:auto!important;
                        10 }
      • TABLE 
        1 table{
                        2     table-layout:fixed;
                        3 }
    • 固定宽度不折行 
      1 <td width="25%" nowrap><div>content</div></td>
    • 空DIV仍占空间 
      1 .empty{
              2     line-height:0%;
              3     height:0px;
              4     font-size:0pt;
              5 }

    1.6 滤镜(filter)

    IE私有，效率也比较低，一般不建议使用。

    • 透明

    IE:

    1 #id{ filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)}

    FF:

    1 #id{opacity:0.6}

    1.7 行为(behavier)

    在css中使用js, IE特有,借此可实现max-width,min-width等效果，不过效率比较低.同时这里也是可能存在XSS攻击的地方.

    1.8 Bug

    • 高度不适应 :: 内层设完margin或者padding后比外层高度还高。解决方案:在内层上下各加一个空div.
    • 容器不扩展 :: 内存浮动后，外层缩成直线。解决方案:内存结束时清除浮动。
    • margin加倍 :: 在IE 5.x、IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决
    • IE6 3px :: IE6中左浮动div右侧的文本和块与左div的距离会增加3px，解决方法给左侧的div增加margin-right:-3px;或者避免使文本直接与左div接触，同时右侧的块使用display:inline-block
    • IE6捉迷藏 :: 一个浮动元素后而跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图像的容器元素中。假如清理元素砬到了浮动元素，那么中间的非浮支元素看起来消失了，隐到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现。解决方案:去掉背景或者容器指定宽高，或者指定行高，或者将浮动元素和容器元素的position属性设置为relative也会减轻这个问题。
    • IE6断头台 :: 当容器中左浮动对象右侧直接跟链接，并且链接的hover状态属性有变化的话，可能导致容器的高度重新计算，并切掉左浮动对象的部分内容。解决方案：浮动对象后面不直接跟非浮动对象，或者最后清除浮动。

    1.9 css hack

    • @import 
      1 @import ("notIE.css") screen;/*IE不支持设备类型*/
    • +_hack 
      1  #content {
              2      width:500px;
              3      +width:480px;/* for IE7*/
              4      _490px:/* for IE6*/
              5  }
    • 条件注释 
      1 <!--[if lt IE 7]>
              2 <link type="text/css" rel="stylesheet" href="cond.css" />
              3 <![endif]-->
    • 更多CSS HACK

    2 Javascript

    2.1 检测技术

    • 对象检测 
    1     if (window.XMLRequest){
    2         this.req = new XMLRequest;
    3     }
    4     else if (window.ActiveXObject){
    5         this.req = new ActiveXObject("Micorsoft.XMLHTTP")
    6     }
    7     else {
    8         throw new Error("Your browser doesn't support an XML HTTP Request.");
    9     }
    • 浏览器检测 
     1     var sUserAgent = navigator.userAgent;
     2     var fAppVersion = parseFloat(navigator.appVersion);
     3     var isOpera = sUserAgent.indexOf("Opera") > -1;
     4     var isIE = sUserAgent.indexOf("compatible") > -1
     5                && sUserAgent.indexOf("MSIE") > -1
     6                && !isOpera;
     7     var isMoz = sUserAgent.indexOf("Gecko") > -1
     8 
     9     var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
    10     var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC")
    11                 || (navigator.platform == "Macintosh");
    12     var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
    • 总结 :: 优先使用对象检测，尽量避免使用浏览器检测，这样能够适应更多的浏览器，而且还可以预防未来浏览器版本变化导致的一些不兼容问题。

    2.2 Event

    DOM标准中事件模型是先捕获再冒泡，IE中只有冒泡阶段。

    事件获取
    var evt = arguments[0] || window.evt;
    添加/删除事件Handler
    • IE :: attachEvent(window,‘onload’,handler)/distachEvent(window,‘onload’,handler)
    • FF :: addEventListener(window,‘load’,handler,false)/removeEventListener(window,‘load’,handler,false)
    SCRIPT标签
    IE中script标签具有event和for属性 供事件绑定用 firefox 不支持
    常用事件属性
    IE FF 说明
    cancelBubble stopProgation() 阻止事件起泡
    srcElement target 事件对象
    returnValue parentDefault() 阻止默认行为
    中文输入法模式下的keyup事件
    IE:触发keydown和keyup, 不触发keypress. 能够获得输入值。
    Firefox:触发keydown和keypress, 不触发keyup. 输入值未能获得。在回车后会触发keyup, 可获得输入值。
    Opera:keydown, keypress和keyup都不触发，输入值也未能获 鼠标滚轮事件IE为mousewheel,FF为‘DOMMouseScroll’.滚轮的滚动距离IE为event.wheelDelta,FF为event.detail,而且二者的方向相反,IE滚轮向下滚wheelDelta为负值

    2.3 Dom

    • FF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在
    • IE FF均支持parentNode,FF不支持parentElement
    • FF不支持innerText,但有textContent
    • DOM标准中Node无text和xml属性
    • IE会忽略由空白和换行组成的部分，而FF将其作为文本节点
    • IE有一些非标准的、Mozilla 不支持的内容操作方法，包括检索值、插入文本以及邻近某个节点插入元素，比如 getAdjacentElement 和 insertAdjacentHTML
    • IE和DOM标准的文档片段处理方式不一样
    • document.write(),如果写入的内容有脚本，FF会把字符串中的</script>解释成外层<script>的结束标签,需要将script标签拆分，document.write(“<script>alert(‘hello)</”+“script>”);
    • Table操作ie不允许使用tr的innerHTML赋值,包括tbody

    2.4 XML

    • 空白 IE忽略 FF作为文本节点
    • IE不支持节点类型的名称常量,如NODE.ELEMENT_NODE，只支持数字.可以自定义 var NODE = {ELEMENT_NODE:1}
    • XMLRequest 参考
    • XML解析器 参考
    • XPath 参考
    • XSLT转换 参考

    2.5 Encode

    2.6 CompatMode

    • 判别方法document.compatMode,页面未声明doctype时是backCompat,否则是CSS1Compat(IE8可能采用documentMode), FF不受CompatMode的影响,IE下可理解为IE5.5与IE6的区别
    • 对JS的影响主要体现在clientWidth等属性上,关于对象使用document.body(简称b)还是document.documentElement(简称de)。
    • 窗口尺寸 FF下窗口高度(不包含滚动条)为b.clientHeight,包含滚动条FF下面没有 兼容模式下窗口高度(不包含滚动条)为b.clientHeight,包含滚动条IE下则为b.offsetHeight| 标准模式下不包含滚动条IE下为de.clientHeight,包含滚动条IE下为de.offsetHeight
    • 内容尺寸 HTML高度FF下b.scrollHeight和de.scrollHeight,BODY的高度为b.offsetHeight 兼容模式下HTML高度IE为b.scrollHeight,Body无 标准模式下HTML高度IE下为de.scrollHeight,Body高度为b.clientHeight|b.scrollHeight|b.offsetHeight
    • 滚动位置 FF下b.scrollLeft 兼容模式下b.scrollLeft 标准模式下de.scrollLeft

    2.7 css

    • height和width的单位 赋值时firefox需要加上单位px,IE可以不加

    2.8 native

    • 数组长度

    [1,2,3,4,] IE下长度为5,firefox长度为4

    • 对象

    {key1:‘value1’,key2:‘value2’,}最后一个逗号IE下报错。

    • 年份

    2004年，而getYear()在FF下得到104，IE下则得到2004,建议使用getFullYear()代替

    • for in

    使用for in操作Dom元素时，IE会先列出内置的属性(没有function)，再列出用户自定义的方法和属性，FF会先列出用户自定义的属性和方法,再列出内置的属性和方法

    2.9 selector

    • IE专有document.all(id), IE下id可直接获取元素, Firefox 都不支持; 应统一使用document.getElementById(id);
    • IE下id可直接获取元素, 因此声明变量时一律加上var;
    • IE下获取集合中子元素可使用[],(), Firefox不支持(); 应统一使用[]; document.form1.elements[name1]
    • frames,forms,anchors等集合, IE下可通过id和name获取， firefox支持name获取， 可选方式， 使用name或者name和id保持一致
    • 自定义属性IE下可通过elem.attr和getAttribute来访问， firefox支持后者，
    • document.getElemsByName()IE下不能取得没有name属性的元素如div

    2.10 窗口

    • 窗口位置
      • IE window.screenLeft,window.screenTop
      • FF window.screenX windwo.screenY
    • 窗口大小
      • IE 未提供
      • FF window.outerWidth window.outerHeight
    • 视口大小 :: 显示HTML页的大小
      • IE document.body.offsetWidth|document.body.offsetHeight
      • FF window.innerWidth|window.innerHeight

    2.11 大小写

    IE 对于部分属性会忽略大小写，但FF不会 比如screen.availWidth

    2.12 页面加载

    页面加载的过程有两个事件，页面完全加载的window.onload，可理解为页面下载完成。另一个是dom准备完成事件，这时图片等可能尚未下载完。如果需要尽早的执行js，可以利用以下方式，创建domReady方法

     1 function _fi(){if(arguments.callee.dn)return;arguments.callee.dn=true;if(_timer)clearInterval(_timer);for(var i=0;i<onloadList.length;i++){onloadList[i].call(window)}};
     2 if(document.addEventListener){document.addEventListener("DOMContentLoaded",_fi,false);}
     3 /*@cc_on @*/
     4 /*@if (@_win32)
     5   document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>"); var script=document.getElementById("__ie_onload");script.onreadystatechange=function(){if(this.readyState=="complete"){_fi();}};
     6 /*@end @*/
     7 if (/KHTML|WebKit/i.test(navigator.userAgent)){var _timer=setInterval(function(){if(/loaded|complete/.test(document.readyState)){_fi();}},10);}
     8 window.onload=_fi;
     9 window.onloadList=[];
    10 var domReady=function(fn){onloadList.push(fn);}

    mooltools内置了domready事件

    1 window.addEvent('domready', function(){
    2   alert('the dom is ready');
    3 });

    2.13 剪贴板操作

     1 function copyToClipboard(txt) {
     2      if(window.clipboardData) {
     3               window.clipboardData.clearData();
     4               window.clipboardData.setData("Text", txt);
     5       } else if(navigator.userAgent.indexOf("Opera") != -1) {
     6            window.location = txt;
     7       } else if (window.netscape) {
     8           try {
     9                 netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    10            } catch (e) {
    11                 alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'");
    12            }
    13           var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
    14           if (!clip)
    15                return;
    16           var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
    17           if (!trans)
    18                return;
    19            trans.addDataFlavor('text/unicode');
    20           var str = new Object();
    21           var len = new Object();
    22           var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
    23           var copytext = txt;
    24            str.data = copytext;
    25            trans.setTransferData("text/unicode",str,copytext.length*2);
    26           var clipid = Components.interfaces.nsIClipboard;
    27           if (!clip)
    28                return false;
    29            clip.setData(trans,null,clipid.kGlobalClipboard);
    30            alert("复制成功！")
    31       }
    32 }

    2.14 加入收藏夹

    • IE :: window.external.AddFavorite(sURL, sTitle);
    • FF :: window.sidebar.addPanel(sTitle, sURL, “”);

    2.15 IE7的变化

    • 打开的窗口无法从子窗口直接关闭, 
    1   window.opener = null;2   window.open("",'_self');3   window.close();
    • 支持原生的XMLHTTP
    • 支持postion:fixed 非常好的一个定位属性(需要指定DocType为标准模式),使得元素相对于浏览器定位,固定元素在左上角、右下角之类的非常简单。 标准模式下IE6也可通过以下方式模拟实现 
    1 <!--[if IE 6]>
    2 <style type="text/css">
    3     html{overflow:hidden;}
    4     body{height:100%;overflow:auto;}
    5     #fixed{position:absolute;right:17px;}
    6 </style>
    7 <![endif]-->

    2.16 firefox 3的变化

    firefox 3.0起支持使用模式对话框

    2.17 其它
  • 相关阅读:
    ES6学习笔记（七）-对象扩展
    ES6学习笔记（四）-数值扩展
    ES6学习笔记（三）-正则扩展
    ES6学习笔记（二）-字符串的扩展
    ES6学习笔记（一）-变量的解构赋值
    webpack打包踩坑之TypeError: Cannot read property 'bindings' of null
    CSS之Flex 布局
    iscsi
    DHCP
    DNS
  • 原文地址：https://www.cnblogs.com/linyijia/p/1804117.html
Copyright © 2011-2022 走看看