浏览器兼容性问题基本汇总
Javascript
1.HTML对象获取问题
FF: document.getElementById('idName')
IE:document.idName 或者document.getElementById('idName')
解决：document.getElementById('idName')
2.contst问题
FF:const或 var 关键字定义常量
IE：只能用var定义常量
解决：使用var关键字定义常量
3.event.x与event.y问题
FF：event对象有 pageX,pageY属性,但是没有x,y属性.
IE：event对象有x,y属性,但是没有pageX,pageY属性;
解决：使用三目运算符，mX（�mX =event.x ? event.x : event.pageX;）
4.window.location.href问题
说明：IE 或Firefox2.0.x下。可以使用window.location或window.location.href
Firefos1.5.x下，只能使用window.location
解决：使用window.locaiton代替window.location.href
5.frame 问题
例：
<frame src=”xxx.html” id=”frameId” name=”frameName” />
访问iframe对象
FF:只能用window.frameName来访问frame对象
IE：使用window.frameId或者window.frameName来访问这个frame对象.frameId和frameName可以同名。
总结：在IE和Firefox中都可以使用window.document.getElementById(“frameId”)来访问这个frame对象.
切换frame内容
在 IE和Firefox中都可以使用window.document.getElementById(“testFrame”).src = “xxx.html”或window.frameName.location = “xxx.html”来切换frame的内容.
如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame)，可以在frame中使用parent来访问父窗口。例如：parent.document.form1.filename.value=”Aqing”;
如果从父窗口调用子窗口的方法需要用到Jquerycontents() 方法，
iframe父子窗口方法调用详情Jquery parents()和contents()
6.模态框和非模态框窗口问题
IE：可以使用showModalDialog和showModelessDialog打开模态框和非模态框窗口
FF:不能使用上用上述方法
解决：使用window.open(URL,name,parnmeters)方式打开新窗口
例如：var
parWin=window.opener;parWin.document.getElementById('aa').value='aValue'
7.父元素（parnetElement）区别
FF： obj.parnetNode
IE : obg.parnetElement
解决方法：FF 和IE 都支持DOM ，所以使用obj.parnetNode
8.自定义属性问题
FF:只能用 getAttribute()获取自定义属性
IE：可以使用获取常规属性的方法（.属性名）来获取自定义属性，也可以用getAttribute()
解决：用 getAttribute()获取自定义属性
9.input.type属性
FF :input.type属性为读写
IE：input.type属性只读
解决：不修改input.type属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。
10.event.srcElement问题
FF： event对象有target属性，没有srcElement属性
IE： event对象没有target属性，有srcElement属性
解决：使用srcObj = event.srcElement ?event.srcElement : event.target;、
11.事件委托问题
FF:使用document.body.onload = inject();
IE:document.body.onload = inject;其中function inject()在这之前已被实现
解决：统一使用 document.body.onload=new Function('inject()'); 或者document.body.onload = function(){/* 这里是代码 */}
Function 和 function 区别
12.table操作问题
IE：不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。
解决：想table最佳一个空行
例
var row = otable.insertRow(-1); var cell = document.createElement(“td”); cell.innerHTML = “”;cell.className = “XXXX”; row.appendChild(cell)
建议使用JQ操作table
13.对象宽高赋值问题
FF：obj.style.height=imgObg.height语句无效，使用obj.css('height',value)
Css
1.不同浏览器标签默认内外补丁不同
说明：不同标签在不加样式控制下，各自的margin 和padding差异较大。
解决：css 通配符格式化标签内外补丁为0，*{margin:0;padding:0}
2.块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。
解决：在float的标签样式控制中加入 display:inline;将其转化为行内属性
3.float的div闭合;清除浮动;自适应高度
清楚浮动
例如：
<div id=”floatA”><div id=”floatB”><div id=”NOTfloatC”>
这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在<div class=”floatB”><div class=”NOTfloatC”>之间加上<div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可：.clear{clear:both;}
自适应高度
作为外部 wrapper 的 div 不要定死高度,为了让高度能自适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：
.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}
排版
我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:
<div id=”page”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决：
<div id=”page”>
<div id=”bg” style=”float:left;width:100%”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
</div>
再嵌入一个float left而宽度是100%的DIV解决之。
float闭合
将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix” 即可,屡试不爽。
/* Clear Fix */
.clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}
4.透明度的兼容CSS设置
/* CSS hack*/
IE6认识的hacker 是下划线_ 和星号 *
IE7 遨游认识的hacker是星号 *
例如：
height:300px;*height:200px;_height:100px;
IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt，
所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；
5.BOX模型
box.style{width:100;border 1px;}
ie理解为box.width = 100
ff理解为box.width = 100 + 1*2 = 102 //加上边框2px
解决方法：div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}
6.元素水平居中
FF:margin:0 auto;
IE: 父级{ text-align:center; }
9.Div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高：line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。
网友评论