1、html
主要是解決html5在主流瀏覽器上的兼容性。特別是在IE瀏覽器上的兼容性茂浮。
//方法 一:使用google的html5shiv包，將它引入放在<head></head>內(nèi)部
<!--[if IE]>
<script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
<![endif]-->
//原理就是使html5標(biāo)簽成塊狀
//方法二：直接寫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識(shí)別并作為程序執(zhí)行壳咕，同時(shí)啟用ie的條件編譯
//方法三:如果ie6/7/8 禁用腳本的用戶,那么可以參照f(shuō)acebook的做法席揽，引導(dǎo)用戶進(jìn)入帶有noscript標(biāo)識(shí)的頁(yè)面，用html4標(biāo)簽代替HTML5標(biāo)簽谓厘。當(dāng)用戶點(diǎn)擊’查看這里’時(shí),引導(dǎo)用戶進(jìn)入html4標(biāo)簽設(shè)計(jì)的網(wǎng)頁(yè)
<!--[if lte IE 8]>? ?
<noscript>?
? ? <style>.html5-wrappers{display:none!important;}</style>?
? ? <div class="ie-noscript-warning">您的瀏覽器禁用了腳本幌羞，請(qǐng)<a href="">查看這里</a>來(lái)啟用腳本!或者<a href="/?noscript=1">繼續(xù)訪問(wèn)</a>.?
? ? </div>?
</noscript>?
<![endif]-->
css
css3不兼容IE9以下瀏覽器的解決方案:
//對(duì)于css3新增的屬性，大多數(shù)解決方式是屬性名前加不同瀏覽器內(nèi)核前綴
-ms-border-radius
-moz-border-radius
-o-border-radius
-webkit-radius
也可以使用google提供的一個(gè)包
<!--[if lte IE 9]>
? ? <script src="JS/selectivizr.js"></script>
? ? <![endif]-->
? ? 但是竟稳，需要注意幾點(diǎn):
? ? (1)與selectivizr.js同文件夾下需要放入PIE.htc属桦，PIE_IE9.js熊痴，PIE_IE678.js，prefixfree.min.js文件;
? ? (2)樣式不能是行內(nèi)樣式聂宾；
? ? (3)如果需要用到偽類的選擇器愁拭，請(qǐng)?jiān)陧?yè)面引用JQ、 MooTools文件等亏吝，不同的文件對(duì)選擇器的支持程度不同岭埠。
其他，css在不同瀏覽器的差異解決
(1)cursor:hand; 和 cursor:pointer
firfox不支持hand,IE支持pointer
所以統(tǒng)一使用pointer
(3)css透明問(wèn)題
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;}
因?yàn)樵贗E中不之別!important,在別的瀏覽器識(shí)別它惜论。
(6)margin加倍問(wèn)題
在IE中，給float的div設(shè)置margin值會(huì)加倍止喷，這是IE6都存在的問(wèn)題
解決方案：給div加 display:inline;
(7)IE不識(shí)別min-
在IE 中把正常的width和height當(dāng)有min-的情況馆类。所以可以同時(shí)設(shè)置width和min-width
div{width:auto;height:auto;min-width:80px;}
js-DOM
(1)注冊(cè)事件和移出事件
IE : attachEvent(on+eventName,callback) callback中的this指向window ; detachEvent(on+eventName)
火狐和谷歌:addEventListener(eventName,callback,false) callback中this指向當(dāng)前事件對(duì)象 ; removeEventListener(eventName)
(2)取消事件冒泡
IE: window.event.cancelBubble = true
火狐: e.stopPropagation()
谷歌二者都可以
(3)取消瀏覽器默認(rèn)行為
通用的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)重定向到新頁(yè)面
IE\火狐2.0 : window.location 或者 window.location.href
Firfox1.5 : window.location
(7)獲取事件的真正觸發(fā)者
IE : window.event.srcElement
火狐： event.target
(8)獲取樣式float關(guān)鍵字
IE : element.style.styleFloat
非IE : element.style.cssFloat
(9)獲得計(jì)算后的樣式
IE: element.currentStyle
非IE: window.getComputedStyle(element,null)
