老生常談IE相容性:ie6 javascript:void(0)、IE7 input透明、IE8 jquery動態載入css
這年頭依舊有人堅守IE6陣營,為什麼呢?人家客戶說單位以前系統必須用IE6沒辦法升級,這理由還真充分!
一、IE6 對javascript:void(0)的支援
問題:<a href=”javaScript:void(0)” onclick=”doSomething();”>click me</a>,發現點選事件不起作用。原因是和IE6的事件冒泡處理方法有關,網上一大堆討論。
其實以前遇到過,以前是在onclick事件加上return false;這次發現另一解決辦法。
解決辦法:
1、改為<a href=”javaScript:void(0)” onclick
2、改為<a href=”#” onclick=”doSomething();”>click me</a>,但會致使頁面跳轉到頂端,不推薦。
3、改為<a href=”###” onclick=”doSomething();”>click
me</a>
二、IE7 input設定背景色為透明、且父節點position:absolute;時,無法點選得到焦點
問題:<div id="input" style='position:absolute;.....'><input type="text" id="account" placeholder="賬號" style='background-color:transparent;' /></div>
真是無語,IE6都正常唯IE7存在此問題
解決辦法:
1、父節點不使用絕對定位改為浮動,如<div id="input" style='foat:left;.....'>2、input加上背景色<input type="text" id="account" placeholder="賬號" style='background-color:#fff' /> 3、input加上背景圖,指向一個全透明的圖片<input type="text" id="account" placeholder="賬號" style='background-image:url(images/empty.gif)' />
三、IE8用jquery動態載入css
問題:jquery版本1.10.2,使用$("<link>").attr({ rel: "stylesheet",type: "text/css",href: "site.css"}).appendTo("head");載入css,IE9+、Chrome都正常,測試到IE8就不行了,網上有人說IE8可IE6、7不行,可能與jquery版本有關。
解決辦法:用傳統的方式document.createElement...head.appendChild...程式碼不附,網上大把。
四、RGBA的低版本實現辦法
這純屬意見發現,記錄一下。IE各版本對rgba的支援見
型別 | Internet Explorer | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
版本 | (×)IE6 | (√)Firefox 3.0.10 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4 |
(×)IE7 | |||||
(×)IE8 | |||||
(√)IE9 |
IE家族只有9以後的版本支援該屬性;
解決辦法:IE6-8用濾鏡實現filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);