Javascript和CSS浏览器兼容总结

这是我总结多年的一个小文档，主要内容是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.x8.关于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的解释不同，例如：formtableinput//table/formFF中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.调用子框架或者其它框架中的元素的问题框架问题繁体字网的前段设计师曾做过详细的讲解，简单来说，在IE中，可以用如下方法来取得子元素中的值document.getElementById(“frameName”).(document.)elementNamewindow.frames[frameName].elementName在FF中则需要改成如下形式来执行，与IE兼容：window.frames[frameName].contentWindow.document.elementNamewindow.frames[frameName].document.elementName18.对象宽高赋值问题问题：FireFox中类似obj.style.height=imgObj.height的语句无效解决方法：统一使用obj.style.height=imgObj.height+“px”;19.innerText的问题问题：innerText在IE中能正常工作，但是innerText在FireFox中却不行解决方法：在非IE浏览器中使用textContent代替innerText20.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:auto2.高度问题两上下排列或嵌套的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+子marignIE里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”“”htmlxmlns=””高尽量用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:bloc