html\css\js-dom在不同主流浏览器的兼容问题

忘是亡心i 2022-07-13 15:29 163阅读 0赞

## 1、html ##

主要是解决html5在主流浏览器上的兼容性。特别是在IE浏览器上的兼容性。

//方法一:使用google的html5shiv包，将它引入放在<head></head>内部
    
    //原理就是使html5标签成块状

//方法二：直接写js代码
     
    注:@cc_on!@可以被ie识别并作为程序执行，同时启用ie的条件编译

//方法三:如果ie6/7/8 禁用脚本的用户,那么可以参照facebook的做法，引导用户进入带有noscript标识的页面，用html4标签代替HTML5标签。当用户点击’查看这里’时,引导用户进入html4标签设计的网页

## css ##

css3不兼容IE9以下浏览器的解决方案:

//对于css3新增的属性，大多数解决方式是属性名前加不同浏览器内核前缀
    -ms-border-radius
    -moz-border-radius
    -o-border-radius
    -webkit-radius
    也可以使用google提供的一个包
     但是，需要注意几点: (1)与selectivizr.js同文件夹下需要放入PIE.htc，PIE_IE9.js，PIE_IE678.js，prefixfree.min.js文件; (2)样式不能是行内样式； (3)如果需要用到伪类的选择器，请在页面引用JQ、 MooTools文件等，不同的文件对选择器的支持程度不同。

其他，css在不同浏览器的差异解决  
(1)cursor:hand; 和 cursor:pointer  
firfox不支持hand,IE支持pointer  
所以统一使用pointer  
(3)css透明问题  
firfox:opacity:0.5;  
IE:filter(alpha=50);zoom:1;  
(4)css中的width和padding  
在IE7和FF中width宽度不包括padding,在IE6中包括padding  
(5)IE中盒子大小不包括border；Firfox中包括  
解决方案：使用!important  
div\{margin:30px !important;margin:28px;\}  
因为在IE中不之别!important,在别的浏览器识别它。  
(6)margin加倍问题  
在IE中，给float的div设置margin值会加倍，这是IE6都存在的问题  
解决方案：给div加 display:inline;  
(7)IE不识别min-  
在IE 中把正常的width和height当有min-的情况。所以可以同时设置width和min-width  
div\{width:auto;height:auto;min-width:80px;\}

## js-DOM ##

(1)注册事件和移出事件  
IE : attachEvent(on+eventName,callback) callback中的this指向window ; detachEvent(on+eventName)  
火狐和谷歌:addEventListener(eventName,callback,false) callback中this指向当前事件对象 ; removeEventListener(eventName)  
(2)取消事件冒泡  
IE: window.event.cancelBubble = true  
火狐: e.stopPropagation()  
谷歌二者都可以  
(3)取消浏览器默认行为  
通用的return false;  
event.preventDefault() //低版本IE不支持  
低版本IE: window.event.returnValue = false  
(4)innerText和textContent  
IE中有innerText属性，firfox中有textContent  
解决方案：

function setInnerText(ele,content){ 
        if(typeof ele.textContent==='undefined'){ ele.innerText = content }else{ ele.textContent=content }
    }

(5)input的type属性  
IE: input的type属性是只读的  
Firfox: input的type属性是可写的  
(6)重定向到新页面  
IE\\火狐2.0 : window.location 或者 window.location.href  
Firfox1.5 : window.location  
(7)获取事件的真正触发者  
IE : window.event.srcElement  
火狐： event.target  
(8)获取样式float关键字  
IE : element.style.styleFloat  
非IE : element.style.cssFloat  
(9)获得计算后的样式  
IE: element.currentStyle  
非IE: window.getComputedStyle(element,null)  
未完待续……