常见浏览器兼容问题

基本概念：浏览器兼容性问题又被称为网页兼容性或网站兼容行问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间兼容性问题。在网站的设计和制作中，做好浏览器兼容，才能让网站在不同的浏览器下都显示正常，而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。

产生原因：因为不同浏览器使用内核（根本原因）所支持的HTML等网页语言标准不同；以及客户端的环境不同（如分辨率不同）造成的显示效果不能达到理想效果。

从浏览器内核角度来看，浏览器兼容性问题分为一下三类：

1.渲染相关：和样式相关的问题，即体现在布局效果上的问题

2.脚本相关：和脚本相关的问题包括Js和DOM、BOM方面的问题。

3.其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。

    

以下罗列多种兼容性问题及解决办法：

    1.HTML对象获取问题

    FF：getElementById("...");

    IE：getElementById("...")或者document.idname

    解决办法：统一使用document.getElementById();

   2.const问题

    FF下可以使用const关键字或者var关键字来定义常量；IE下只能使用var来定义常量。

    解决办法：统一使用var关键字来定义常量

    3.event.x与event.y问题

    FF下event对象有PageX、PageY属性，但是没有x、y属性；IE下event对象有x、y属性，但是没有PageX、PageY属性。

    解决办法：使用：？操作符（mX = event.x?event.x:event.PageX;）

    4.window.location.href问题

    IE或者FF2.0以下，可以使用window.location或者window.location.href;FF1.5.x以下只能使用window.location.href。

    解决办法：window.location.href

    5.frame问题

    如：<frame src="xxx.html" id="frameId" name="frameName" />

    （1）访问frame对象：

    FF：只能使用window.frameName来访问这个对象。

    IE：使用window.frameId或者window.frameName来访问frame对象，frameId和frameName可以同名。

    都可以使用window.document.getElementById("frameId");来访问。

    （2）切换frame内容

        在IE和FF中都可以使用window.document.getElementById("FrameId").src="xxx.html"或者window.frameName.location="xxx.html"来切换frame的内容。

    如果需要将frame中的参数传回父窗口（注意不是opener，而是parent frame），可以在frame中使用parent来访问父窗口。如：

    parent.document.form1.filename.value="Aqing";

    6.模态和非模态窗口

    IE下可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；而FF不能

    解决办法：window.open(pageURL,name,parameters)方式打开新窗口。

    如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问父窗口

    例如：var parWin = window.opener;

                parWin.document.getElementById("...").value = "...";

    7.FF与IE父元素的区别

        FF：obj.parentNode

        IE：obj.parentElement

        解决办法：FF和IE都支持DOM，所以使用obj.parentNode是不错的选择。

    8.document.formName.item("itemName")问题

        IE可以使用document.formName,item("itemName")或document.formName.elements["elementName"];

        FF只能使用document.formName.elements["elementName"]

    9.集合类对象问题

        FF下只能使用[]获取集合类对象

        IE下可以使用（）或[]获取集合类对象。

    10.自定义属性问题

        IE下可以使用获取常规的属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；

        FF下只能使用getAttribute（）获取自定义属性

    11.input.type属性问题

        IE下input.type属性为只读；FF为读写。

        解决办法：不修改input.type属性，如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。

    12.event.srcElement问题

        IE下，event对象有srcElement属性，但是没有target属性

        FF下，event对象有target属性，没有srcElement属性

        解决办法：使用srcObj=event.srcElement?event.srcElement:event.target;

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

        被点击过访问过的超链接样式不再具有hover和active了，很多人应该都遇到这样的问题。

        解决技巧是改变css属性的排列顺序：L-V-H-A

    14.IE不识别min

        如果只设置了min-height和min-width的值，那么对于IE来说，根本没设置宽高。

        如果要设置最小宽度：#container{min-width:600px;width:expression(document.body.clientWidth<600?"600px":"auto");}

        

    15.浮动IE产生双倍距离

        如：#box{float:left;width:10px;margin:0 0 0 100px;}

                这种情况下会产生20px的距离，解决办法是在float的标签样式控制中加入 --display:inline;将其转换成行内属性（这个符号只有IE可以识别）

    16.渐进识别的方法，从总体中逐渐排出局部。

        首先使用“\9”这个标记，将IE浏览器从所有情况中分离出来

        其次，使用“+”将IE8和IE7、IE6分离开

        栗子：

        .box{

                background-color:#aaa;//所有识别

                background-color:#eee\9;//IE识别

                +background-color:#fff;  //IE6.7识别

                  _background-color:#eee;   //IE6识别

        }

        

    17.png24位的图片在ie6浏览器上出现背景，解决办法是做成png8

    浏览器内核：

          IE：Trident

        Mozilla：Gecko

        Safari：WebKit

        Chrome：Blink（Webkit的分支）

        Opera：Presto，现在是Blink