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)
