html\css\js-dom在不同主流瀏覽器的相容問題
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 //方法三:如果ie6/7/8 禁用指令碼的使用者,那麼可以參照facebook的做法，引導使用者進入帶有noscript標識的頁面，用html4標籤代替HTML5標籤。當用戶點選’檢視這裡’時,引導使用者進入html4標籤設計的網頁
<!--[if lte IE 8]> 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)
未完待續……