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

1、html

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

//方法 一:使用google的html5shiv包，将它引入放在

内部

//原理就是使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)