1、html
主要是解决html5在主流浏览器上的兼容性。特别是在IE浏览器上的兼容性。
//方法 一:使用google的html5shiv包，将它引入放在<head></head>内部
<!--[if IE]>
<script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
<![endif]-->
//原理就是使html5标签成块状
//方法二：直接写js代码
<!--[if lt IE9]>
<script>
(function() {
if (!
/*@cc_on!@*/
0) return;
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
})()
</script>
<![endif]-->
注:@cc_on!@可以被ie识别并作为程序执行，同时启用ie的条件编译
//方法三:如果ie6/7/8 禁用脚本的用户,那么可以参照facebook的做法，引导用户进入带有noscript标识的页面，用html4标签代替HTML5标签。当用户点击’查看这里’时,引导用户进入html4标签设计的网页
<!--[if lte IE 8]>
<noscript>
<style>.html5-wrappers{display:none!important;}</style>
<div class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
</div>
</noscript>
<![endif]-->
css
css3不兼容IE9以下浏览器的解决方案:
//对于css3新增的属性，大多数解决方式是属性名前加不同浏览器内核前缀
-ms-border-radius
-moz-border-radius
-o-border-radius
-webkit-radius
也可以使用google提供的一个包
<!--[if lte IE 9]>
<script src="JS/selectivizr.js"></script>
<![endif]-->
但是，需要注意几点:
(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)
网友评论