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)