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() {?

? ? 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)

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容