web兼容性及解决方案(收集)

产生的原因:

FF实现了DOM1、DOM2

safri实现大部分DOM1、少部分DOM2

IE实现了少部分DOM1、没实现DOM2




获取节点:

childNodes:FF会把空的文本当作一个结点,IE不会。配合使用"nodeType"解决此问题。


获取首(尾)节点:

firstChild(lastChild):IE

firstElementChild(lastElementChild):FF (firstChild在FF中会获取到第一个结点是文本结点)

获取兄弟节点:

节点.nextSibling(previousSibling):IE

节点.nextElementSibling(previousElementSibling):FF


通过className获取元素

getElementsByClassName():IE9以上

通过遍历对比元素的className属性进行筛选:IE8以下(例:if(aEle[i].className == "box"))


获取当前样式(currentStyle):

currentStyle:IE、Opera(例:DIV.currentStyle.widht)注:可能会出现NaN!
getComputedStyle:FireFox、Chrome、Safari(例:window.getComputedStyle(DIV).width)


事件对象(Event):

IE可以直接使用:Event.cancelBubble = true;

FF需要从参数中传进来:oDivShare.onmouseout = function (ev){ ev.cancelBubble = true; }


div.onmouseleave与div.onmouseout事件:

div.onmouseout:会冒泡,从子div移动到父时也会触发,与之对应的鼠标移入事件为:div.onmouseover.

div.onmouseleave:不会冒泡,从子div移动到父div时不会触发,与之对应的鼠标移入事件为:div.onmouseenter.(FF/chrome不兼容,经测试chrome兼容。)


透明度:

opacity:0.5;(CSS的现行标准,IE9、IE10、Firefox,Safari和Opera等。)

filter:alpha(opacity=50);(IE6~IE8)

-moz-opacity:0.5;(老版本的Mozilla。)

-khtml-opacity: 0.5;(老版本的Safari。)


scrollTop、scrollLeft等...:

document.documentElement(IE(声明DTD)、Firefox,例如:var iScrollTop = document.documentElement.scrollTop;)

document.body(Chrome、Edge、IE(未声明DTD,例如:var iScrollTop = document.body.scrollTop);

window.pageYOffset (safari 比较特别,有自己获取scrollTop的函数 )

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值