gt;>>通用hack方法篇<<<

最近看到淘寶已經放棄IE8了，瞬間樂了，但是轉瞬一想，自己還在苦逼的兼容著IE6，頓時心灰意冷，生無可戀啊！沒有IE就沒有傷害！在此衷心起到IE6/7/8早日被拋棄，還世界一片安寧！

言歸正傳，這次是想把自己整理的一些瀏覽器兼容方案post上來，希望可以幫到一些和我一樣苦逼兼容著IE6的伙伴。

一些通用的hack方法

這邊主要簡單的講述一些瀏覽器的hack方法，至于具體的兼容問題，后面再一一講解。

CSS hack和filter原理

1. 利用瀏覽器自身的bug來實現特定瀏覽器的樣式

2. 利用瀏覽器對CSS的完善度來實現，例如某些CSS規則或語法的支持程度，原理類似目前我們經常使用的 -wekit-　之類的屬性；

IE條件注釋

IE的條件注釋僅僅針對IE瀏覽器，對其他瀏覽器無效；例如下面的語法：

<!--[ifIE]>//你想要執行的代碼<![endif]--><!--[ifltIE8]>//你想要執行的代碼<![endif]--><!--[if!IE8]>//你想要執行的代碼<![endif]-->

!important 關鍵字

!important 在css中是聲明擁有最高優先級，也就是說，不管css的其他優先級，只要!important出現，他的優先級就最高！遨游1.6及更低版本、IE6及更低版本瀏覽器不能識別它。盡管這個!important 很實用，但是非到必要的時刻，不要使用它！

屬性過濾器（較為常用的hack方法）

針對不同的IE瀏覽器，可以使用不同的字符來讓特定的版本的IE瀏覽器進行樣式控制。

至于一些的關于屬性選擇器的過濾的方法這邊就不再介紹了，因為這些都沒有必要了，我想不到還有哪些喪心病狂的項目會要求兼容到IE6以下或者更低的了！

IE hack寫法一覽

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

>>>CSS兼容方案篇<<<

上一篇文章介紹了一些常用hack方法，這次來講一些之前遇到過或者嘗試過的一些CSS兼容問題與解決問題，這些是自己的一些收集整理，肯定不可能大而全，只是一些比較常見的問題，等我整理下，下次來寫篇JS的兼容問題。

另外，如果你是一位幸運的朋友（不用兼容低版本IE），那么你也沒有必要看這篇文章了。

a標簽CSS順序

很多新人在寫a標簽的樣式，會疑惑為什么寫的樣式沒有效果，其實只是寫的樣式被覆蓋了，正確的a標簽順序應該：

• link

• visited

• hover

• active

24位的png圖片

IE6不支持透明咋辦？使用png透明圖片唄，但是需要注意的是24位的PNG圖片在IE6是不支持的，解決方案有兩種：

• 使用8位的PNG圖片

• 為IE6準備一套特殊的圖片

透明度

• opacity: 0.8; //通用

• filter: alpha(opacity=80); //IE

• filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80); //IE6的寫法

如果你不需要兼容IE6，那么你可以甩掉那又臭又長的裹腳布了，反正我是記不住IE6的透明度寫法，別懷疑，剛網上找的.

IE6雙邊距

行內屬性設置了塊級屬性（display: block;）后，會產生雙倍邊距。

解決方案是在添加一個 display: inline; 或者 display: table;

雙倍margin

浮動元素設置了margin在IE6下會產生雙倍margin。

只要給浮動元素設置 display: inline;就可以了。或者說使用IE6的hack：_margin；

min-height的兼容寫法

.divBox{min-height:200px;height:auto!important;height:200px;overflow:visible;}

IE6最小寬度（反正我沒實踐過？！）

.divBox{min-width:600px;_width:expression(document.body.clientWidth<600?"600px":"auto");}

盒模型差異

IE盒模型：margin 、 content（包含border、padding）

W3C盒模型： margin 、border、 padding、 content

CSS3中的box-sizing的屬性就是為了這兩種模式，border-box（IE盒明星）和content-box（W3C）

img標簽-圖片存在邊距

使用 vertical-align 屬性可以清楚這種邊距

順便說下a標簽同樣會存在邊距，具體的解決方法可以看看去除inline-block元素間間距的N種方法;

IE6 高度無法小于10px

• 添加overflow的屬性

• 設置font-size的屬性為高度的大小

雙倍float

.divBox{float:left;width:100px;margin:000100px;//這種情況之下IE會產生200px的距離display:inline;//使浮動忽略}

ul列表邊距屬性不統一

• IE下 ul的邊距是使用margin

• firefox下ul的邊距是使用padding

  重置CSS基本樣式， 統一使用margin或者padding

IE6下select元素顯示bug

select元素在IE6下是以窗口的形式展現的，所以在你需要彈出一個提示框（modal）的時候，你會發現select在modal的上面，無論你設置多大z-index都無效。解決的方法也很簡單，利用一個透明的iframe蓋住select就可以了

<divclass=””wrapper><!--[ifIE6]><iframestyle="position:absolute;top:0;left:0;width:100%;height:100px;z-index:-1;filter:alpha(opacity=0);opacity=0;border-style:none;"></iframe><![endif]-->//TODO;</div>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

js兼容方案篇

js兼容性方案如期而至，雖然現在有了前端框架和各種庫已經幫我們解決了各種兼容問題，或是現代瀏覽器已經不需要考慮這些繁瑣的兼容性，但是我們還是有必要了解下這些兼容問題,畢竟有些時候我們還是需要原生JavaScript來實現我們的功能，或是需要兼容至萬惡的IE6（例如苦逼的我）。

以下的所說的瀏覽器都是特指低版本瀏覽器，畢竟現代瀏覽器已經很少有兼容性問題了

document.formName.item()

document.formName.item(”itemName”);//IE支持document.formName.elements["elementName"];//均支持

獲取屬性

根據很多的人的反饋來看，無論是常規的獲取自定義屬性，或是jq的attr()在不同的環境下都是存在著些許兼容性問題，所以為了保險起見，最好是使用原生的getAttribute()來獲取屬性；

ID

在IE下，我們是可以通過document.idName來獲取元素，但是Firefox是不允許的。

而且Firefox中我們使用與html對象ID相同的變量名，所以，獲取元素最好使用document.getElementById(”idName”) 代替 document.idName，避免不必要的bug

input.type

IE下不允許修改input的類型，Firefox可以修改。盡量避免修改input的類型。

setattribute

object.setAttribute("class","style");//在IE8、Chrome、火狐、Opera10中都能設置成功；但是在IE7下無法設置。object.setAttribute("className","className");//只有IE7能設置成功，但是其他瀏覽器均無法設置。

統一使用 object.className=”content”

style與cssText

object.setAttribute("style","width:100px;height:200px");//在IE8、Chrome、火狐、Opera10中都能設置成功；但是在IE7下無法設置。object.setAttribute("cssText","width:100px;height:200px");//所有瀏覽器均不支持。object.style.cssText="width:100px;height:200px";//統一使用如上方法

indexof()

IE8以下不兼容indexof()方法, 添加indexof的原型方法即可；

if(!Array.prototype.indexOf){Array.prototype.indexOf=function(elt){varlen=this.length>>>0;varfrom=Number(arguments[1])||0;from=(from<0)?Math.ceil(from):Math.floor(from);if(from<0){from+=len;}for(;from<len;from++){if(frominthis&&this[from]===elt){returnfrom;}}return-1;};}

event.srcElement

IE下，even不存在target屬性

srcObj=event.srcElement?event.srcElement:event.target;

父節點parentElement

ele.parentElement//firebox不支持ele.parentNode//通用

table使用innerHtml

在IE中使用innerHtml和appendChild無效，解決方法是將內容插入到tbody中

varrow=document.createElement("tr");varcell=document.createElement("td");varcell_text=document.createTextNode("插入的內容");cell.appendChild(cell_text);row.appendChild(cell);document.getElementsByTagName("tbody")[0].appendChild(row);

移除節點

removeNode();//firebox不支持removeChild();//通用，取上一層父節點再移除子節點

坐標

varpage={};page.x=event.x?event.x:event.pageX;page.y=event.y?event.y:event.pageY;//event的x,y在IE中支持，pageX和pageY在Firefox中支持

事件監聽

functionaddEvent(elem,eventName,handler){　　if(elem.attachEvent){　　　　elem.attachEvent("on"+eventName,function(){　　　　　　handler.call(elem)});　//此處使用回調函數call()，讓this指向elem　　}elseif(elem.addEventListener){　　elem.addEventListener(eventName,handler,false);　　}}functionremoveEvent(elem,eventName,handler){if(elem.detachEvent){　　elem.detachEvent("on"+eventName,function(){　　　handler.call(elem)});　　　　//此處使用回調函數call()，讓this指向elem　　}elseif(elem.removeEventListener){　　elem.removeEventListener(eventName,handler,false);　　}}//IE提供了attachEvent和detachEvent兩個接口，而Firefox提供的是addEventListener和removeEventListener。

鍵盤事件 keyCode

functiongetKeyCode(e){//兼容IE和Firefox獲得keyBoardEvent對象e=e?e:(window.event?window.event:"")//兼容IE和Firefox獲得keyBoardEvent對象的鍵值returne.keyCode?e.keyCode:e.which;}//IE：e.keyCode//fireFox:e.which