Javascript和CSS浏览器兼容总结

精品word文档值得下载值得拥有这是我总结多年的一个小文档，主要内容是Javascript和CSS浏览器兼容总结，最近看见有人咨询浏览器兼容的问题，就贡献出来。上面定义的Price在函数

并不一定全，有的也可能不准确，比如新出的IE8、Chrome等都没有太多涉及，虽然最近做的一些项目也兼容了IE8、Chrome等，但都没来的及总结进去，后来就忘了…汗。大家一起慢慢完善吧。

javascript部分

1.document.form.item问题

问题：

代码中存在document.formName.item(“itemName”)这样的语句，不能在FF下运行

解决方法：

改用document.formName.elements["elementName"]

2.集合类对象问题

问题：

代码中许多集合类对象取用时使用()，IE能接受，FF不能

解决方法：

改用[]作为下标运算，例：

document.getElementsByName(“inputName”)(1)改为document.getElementsByName(“inputName”)[1]

3.window.event

问题：

使用window.event无法在FF上运行

解决方法：

FF的event只能在事件发生的现场使用，此问题暂无法解决。可以把event传到函数里变通解决：

onMouseMove=“functionName(event)”

functionfunctionName(e){

e=e||window.event;

……

}

4.HTML对象的id作为对象名的问题

问题：

在IE中，HTML对象的ID可以作为document的下属对象变量名直接使用，在FF中不能

解决方法：

使用对象变量时全部用标准的getElementById(“idName”)

5.用idName字符串取得对象的问题

问题：

在IE中，利用eval(“idName”)可以取得id为idName的HTML对象，在FF中不能

解决方法：

用getElementById(“idName”)代替eval(“idName”)

6.变量名与某HTML对象id相同的问题

问题：

在FF中，因为对象id不作为HTML对象的名称，所以可以使用与HTML对象id相同的变量名，IE中不能

解决方法：

在声明变量时，一律加上var，以避免歧义，这样在IE中亦可正常运行

最好不要取与HTML对象id相同的变量名，以减少错误

7.event.x与event.y问题

问题：

在IE中，event对象有x,y属性，FF中没有

解决方法：

在FF中，与event.x等效的是event.pageX，但event.pageXIE中没有

故采用event.clientX代替event.x，在IE中也有这个变量

event.clientX与event.pageX有微妙的差别，就是滚动条

要完全一样，可以这样：

mX=event.x?event.x:event.pageX;

然后用mX代替event.x

8.关于frame

问题：

在IE中可以用window.testFrame取得该frame，FF中不行

解决方法：

window.top.document.getElementById(“testFrame”).src=‘xx.htm’

window.top.frameName.location=‘xx.htm’

9.取得元素的属性

在FF中，自己定义的属性必须getAttribute()取得

10.在FF中没有parentElement，parement.children而用parentNode，parentNode.childNodes

问题：

childNodes的下标的含义在IE和FF中不同，FF的childNodes中会插入空白文本节点

解决方法：

可以通过node.getElementsByTagName()来回避这个问题

问题：

当html中节点缺失时，IE和FF对parentNode的解释不同，例如：

<form>

<table>

<input/>

</table>

</form>

FF中input.parentNode的值为form，而IE中input.parentNode的值为空节点

问题：

FF中节点自己没有removeNode方法

解决方法：

必须使用如下方法node.parentNode.removeChild(node)

11.const问题

问题：

在IE中不能使用const关键字

解决方法：

以var代替

12.body对象

FF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在

这会产生在IE下，文档没有载入完时，在body上appendChild会出现空白页面的问题

解决方法：

一切在body上插入节点的动作，全部在onload后进行

13.urlencoding

问题：

一般FF无法识别js中的&

解决方法：

在js中如果书写url就直接写&不要写&

14.nodeName和tagName问题

问题：

在FF中，所有节点均有nodeName值，但textNode没有tagName值，在IE中，nodeName的使用有问题

解决方法：

使用tagName，但应检测其是否为空

15.元素属性

IE下input.type属性为只读，但是FF下可以修改

16.document.getElementsByName()和document.all[name]的问题

问题：

在IE中，getElementsByName()、document.all[name]均不能用来取得div元素

是否还有其它不能取的元素还不知道（这个问题还有争议，还在研究中）

17.调用子框架或者其它框架中的元素的问题

框架问题\o"繁体字网"繁体字网的前段设计师曾做过详细的讲解，简单来说，在IE中，可以用如下方法来取得子元素中的值

document.getElementById(“frameName”).(document.)elementName

window.frames["frameName"].elementName

在FF中则需要改成如下形式来执行，与IE兼容：

window.frames["frameName"].contentWindow.document.elementName

window.frames["frameName"].document.elementName

18.对象宽高赋值问题

问题：

FireFox中类似obj.style.height=imgObj.height的语句无效

解决方法：

统一使用obj.style.height=imgObj.height+“px”;

19.innerText的问题

问题：

innerText在IE中能正常工作，但是innerText在FireFox中却不行

解决方法：

在非IE浏览器中使用textContent代替innerText

20.event.srcElement和event.toElement问题

问题：

IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性

解决方法：

varsource=e.target||e.srcElement;

vartarget=e.relatedTarget||e.toElement;

21.禁止选取网页内容

问题：

FF需要用CSS禁止，IE用JS禁止

解决方法：

IE:obj.onselectstart=function(){returnfalse;}

FF:-moz-user-select:none;

22.捕获事件

问题：

FF没有setCapture()、releaseCapture()方法

解决方法：

IE:

obj.setCapture();

obj.releaseCapture();

FF:

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);

if(!window.captureEvents){

o.setCapture();

}else{

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

if(!window.captureEvents){

o.releaseCapture();

}else{

window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

CSS部分

div类

1.居中问题

div里的内容，IE默认为居中，而FF默认为左对齐

可以尝试增加代码margin:auto

2.高度问题

两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间

所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是height:100%;

但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：

.float_bottom{clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3.clear:both;

不想受到float浮动的，就在div中写入clear:both;

4.IE浮动margin产生的双倍距离

#box{

float:left;

width:100px;

margin:000100px;//这种情况之下IE会产生200px的距离

display:inline;//使浮动忽略

}

5.padding问题

FF设置padding后，div会增加height和width，但IE不会（*标准的XHTML1.0定义dtd好像一致了）

高度控制恰当，或尝试使用height:100%;

宽度减少使用padding

但根据实际经验，一般FF和IE的padding不会有太大区别，div的实际宽=width+padding，所以div写全width和padding，width用实际想要的宽减去padding定义

6.div嵌套时y轴上padding和marign的问题

FF里y轴上子div到父div的距离为父padding+子marign

IE里y轴上子div到父div的距离为父padding和子marign里大的一个

FF里y轴上父padding=0且border=0时，子div到父div的距离为0，子marign作用到父div外面

7.padding，marign，height，width的傻瓜式解决技巧

注意是技巧，不是方法：

写好标准头

<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<htmlxmlns=”/1999/xhtml”>

高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div

宽尽量用margin，慎用padding，width算准实际要的减去padding

列表类

1.ul标签在FF中默认是有padding值的，而在IE中只有margin有值

先定义ul{margin:0;padding:0;}

2.ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成:{list-style:none;margin:0px;padding:0px;}

显示类

1.display:block,inline两个元素

display:block;//可以为内嵌元素模拟为块元素

display:inline;//实现同一行排列的的效果

display:table;//forFF,模拟table的效果

display:block块元素，元素的特点是：

总是在新行上开始；

高度，行高以及顶和底边距都可控制；

宽度缺省是它的容器的100%，除非设定一个宽度

<div>，<p>，<h1>，<form>，<ul>和<li>是块元素的例子

display:inline就是将元素显示为行内元素，元素的特点是：

和其他元素都在一行上；

高，行高及顶和底边距不可改变；

宽度就是它的文字或图片的宽度，不可改变。

<span>，<a>，<label>，<input>，<img>，<strong>和<em>是inline元素的例子

2.鼠标手指状显示

全部用标准的写法cursor:pointer;

背景、图片类

1.background显示问题

全部注意补齐width，height属性

2.背景透明问题

IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

IE:filter:alpha(opacity=10);

FF:opacity:0.6;

FF:-moz-opacity:0.10;

最好两个都写，并将opacity属性放在下面div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法总结：1、FF:div设置margin-left,margin-right为auto时已经居中,IE不行。

2、FF:body设置text-align时,div需要设置margin:auto(主要是margin-left,margin-right)方可居中

3、FF:设置padding后,div会增加height和width,但IE不会,故需要用!important多设一个height和width4、FF:支持!important,IE则忽略,可用!important为FF特别设置样式

5、div的垂直居中问题:vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行。6、cursor:pointer可以同时在IEFF中显示游标手指状，hand仅IE可以7、在mozillafirefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;8、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}就能解决大部分问题注意事项：

1、float的div一定要闭合。例如：(其中floatA、floatB的属性已经设置为float:left;)

<divid=”floatA”></div><divid=”floatB”></div><divid=”NOTfloatC”></div>这里的NOTfloatC并不希望继续平移，而是希望往下排。这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在<divclass=”floatB”></div><divclass=”NOTfloatC”></div>之间加上<divclass=”clear”></div>这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可：.clear{clear:both;}此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE)用zoom:1;可以做到，这样就达到了兼容。例如某一个wrapper如下定义：.colwrapper{overflow:hidden;zoom:1;margin:5pxauto;}2、margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;例如：<divid=”imfloat”></div>相应的css为#IamFloat{float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}3、关于容器的包涵关系很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。4、关于高度的问题如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）5、最狠的手段-!important;如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下

.tabd1{background:url(/res/images/up/tab1.gif)no-repeat0px0px!important;/*StyleforFF*/background:url(/res/images/up/tab1.gif)no-repeat1px0px;/*StyleforIE*/}值得注意的是，一定要将xxxx!important这句放置在另一句之上，上面已经提过IE7.0对CSS的支持又有新问题。浏览器多了，网页兼容性更差了，疲于奔命的还是我们，为解决IE7.0的兼容问题，找来了下面这篇文章：现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！搜索了一下，找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。现在写一个CSS可以这样：#example{color:#333;}/*Moz*/*html#example{color:#666;}/*IE6*/*+html#example{color:#999;}/*IE7*/那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999.一、CSSHACK以下两种方法几乎能解决现今所有HACK.1,!important随着IE7对!important的支持,!important方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)<style>#wrapper{width:100px!important;/*IE7+FF*/width:80px;/*IE6*/}</style>2,IE6/IE77对FireFox*+html与*html是IE特有的标签,firefox暂不支持.而*+html又为IE7特有标签.<style>#wrapper{#wrapper{width:120px;}/*FireFox*/*html#wrapper{width:80px;}/*ie6fixed*/*+html#wrapper{width:60px;}/*ie7fixed,注意顺序*/}</style>注意:*+html对IE7的HACK必须保证HTML顶部有如下声明：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd">二、万能float闭合关于clearfloat的原理可参见[HowToClearFloatsWithoutStructuralMarkup]将以下代码加入GlobalCSS中,给需要闭合的div加上class="clearfix"即可,屡试不爽.<style>/*ClearFix*/.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}/*HidefromIEMac*/.clearfix{display:block;}/*EndhidefromIEMac*//*endofclearfix*/</style>其他兼容技巧1,FF下给div设置padding后会导致width和height增加,但IE不会.(可用!important解决)2,居中问题.1).垂直居中.将line-height设置为当前div相同的高度,再通过vertical-align:middle.(注意内容不要换行.)2).水平居中.margin:0auto;(当然不是万能)3,若需给a标签内内容加上样式,需要设置display:block;(常见于导航标签)4,FF和IE对BOX理解的差异导致相差2px的还有设为float的div在ie下margin加倍等问题.5,ul标签在FF下面默认有list-style和padding.最好事先声明,以避免不必要的麻烦.(常见于导航标签和内容列表)6,作为外部wrapper的div不要定死高度,最好还加上overflow:hidden.以达到高度自适应.7,关于手形光标.cursor:pointer.而hand只适用于IE.1针对firefoxie6ie7的css样式

现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：

#1{color:#333;}/*Moz*/

*html#1{color:#666;}/*IE6*/

*+html#1{color:#999;}/*IE7*/那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。2css布局中的居中问题

主要的样式定义如下：body{TEXT-ALIGN:center;}#center{MARGIN-RIGHT:auto;MARGIN-LEFT:auto;}说明：首先在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT:auto;MARGIN-LEFT:auto;就可以了。3盒模型不同解释#box{width:600px;//forie6.0-w\idth:500px;//forff+ie6.0}#box{width:600px!important//forffwidth:600px;//forff+ie6.0width/**/:500px;//forie6.0-}

4浮动ie产生的双倍距离#box{float:left;width:100px;margin:000100px;//这种情况之下IE会产生200px的距离

display:inline;//使浮动忽略}这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);#box{display:block;//可以为内嵌元素模拟为块元素display:inline;//实现同一行排列的的效果

diplay:table;IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：#box{width:80px;height:35px;}html>body#box{width:auto;height:auto;min-width:80px;min-height:35px;}6页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个div放到body标签下，然后为div指定一个类：然后CSS这样设计：#container{min-width:600px;width:expression(document.body.clientWidth<600?"600px":"auto");}第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。7清除浮动.hackbox{display:table;//将对象作为块元素级的表格显示}或者.hackbox{clear:both;}或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的#box:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

8DIV浮动IE文本产生3象素的bug左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.#box{float:left;width:800px;}#left{float