浏览器及兼容
1. 五种css浏览器兼容的写法
① * : ie6,ie7可以识别;
② _和- : ie6可以识别;
③ !important :表示高优先级,ie7及以上,firefox都支持,ie6认识带!important的样式属性,但不认识!important的优先级;
④ 引擎前缀 -ms- -moz- -o- -webkit-
2. 三种js浏览器兼容性的写法
详见: https://m.jb51.net/article/16319.htm
① IE可以使用parentElement获得父结点,parent.children得到结点的所有孩子结点。Firefox不支持。
解决方法:使用parentNode和parent.childNodes。
② Firefox使用XMLHttpRequest,IE使用ActiveXObject。
解决方法:
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
③ 事件绑定
addEventListener(“click”, function, true)兼容firefox、chrome、safari、opera、IE9+
attachEvent(“onclick”, function) 兼容IE7,8
解决:
function add(obj,event){
if ( obj.addEventListener) {
obj.addEventListener(event,fn,fase);
}
else{ obj.attachEvent("on"+event,fn);}
}
④ 阻止冒泡
event.stopPropagation() 不兼容IE6-8
event.cancleBubble = true 兼容IE
解决:
function stop(event){
if (event.stopPropagation) { event.stopPropagation();}
else{ event.cancleBubble = true; } }
3. 浏览器内核
浏览器 内核 浏览器引擎前缀
IE浏览器 Trident -ms-
Firefox Gecko -moz-
Safari Webkit -webkit-
opera Blink -o-
Chrome Webkit(原)、Blink(现 -webkit-
主要的需要添加浏览器引擎前缀(vendor-prefix)的属性包括:
• @keyframes
• 移动和变换属性(transition-property/duration/timing-function/delay)
• 动画属性 (animation-name/duration/timing-function/delay)
• border-radius
• box-shadow
• backface-visibility
• column属性
• flex属性
• perspective属性
注意:不带前缀的必须放在最后
4. 写一段IE和Firefox下不兼容的代码
捕获事件
FF没有setCapture()、releaseCapture()方法
IE中的解决方法 obj.setCapture(); obj.releaseCapture();
火狐中的解决办法:
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);
}