1. 程式人生 > >老生常談IE相容性:ie6 javascript:void(0)、IE7 input透明、IE8 jquery動態載入css

老生常談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

=”doSomething();return false;”>click me</a>

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