1.怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標准模式來解析網頁，但在IE中會觸發怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD聲明的好習慣。
2.IE6雙邊距問題：在IE6下，如果對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。例如：
HTML：
<div class="myDiv"></div>
CSS：
.myDiv{
width:100px;
height:100px;
border:1px solid #000;
float:left;
margin-left:30px;
}
Firefox預覽結果：
IE6預覽結果：
很明顯的，在IE6中，margin-left:30px的邊距翻倍成60px了。
解決問題：
設置display:inline：
.myDiv{
width:100px;
height:100px;
border:1px solid #000;
float:left;
display:inline;
margin-left:30px;
}
IE6預覽結果：
3.上下margin重合：margin是個有點特殊的樣式，相鄰的margin-left和margin-right是不會重合的，但相鄰的margin-top和margin-bottom會產生重合。不管IE還是Firefox都存在這問題。例如：
HTML：
<div class="topDiv"></div>
<div class="bottomDiv"></div>
CSS：
.topDiv{
width:100px;
height:100px;
border:1px solid #000;
margin-bottom:25px;
}
.bottomDiv{
width:100px;
height:100px;
border:1px solid #000;
margin-top:50px;
}
我們對上面的div設置了25px的下邊距，對下方的div設置了50px的上邊距。為了便於觀察，這里將div的高度都設為100px。
瀏覽器預覽結果：
可見，結果不是預期的上下div拉開75px的距離，而是拉開了半個div高度(50px)的距離。
解決問題：
統一使用margin-top或者margin-bottom，不要混合使用。這並不是技術上的必需，但卻是個良好的習慣。
4.超鏈接訪問后hover樣式不出現：有時候我們同時設置了a:visited和a:hover樣式，但一旦超鏈接訪問后，hover的樣式就不再出現，這是怎么回事呢？是因為將樣式順序放錯了，調整為先a:visited再a:hover。關於a標簽的四種狀態的排序問題，有個簡單好記的原則，叫做love hate原則，即i(link)ov(visited)e h(hover)a(active)e。
5.IE6、IE7的hasLayout問題：很多時候，CSS在IE下的解析十分奇怪，明明在Firefox中顯示得非常正確，但到了IE下卻出現了問題，有的時候，這些問題甚至表現得非常詭異。
例如一個比較經典的Bug就是設置border的時候，有時候border會斷開，刷新頁面或者拖下滾動條的時候，斷掉的部分又會連接起來。
再比如在IE6&IE7中對元素設置浮動后，其后的元素並未占據這部分空間，造成了IE6&IE7中浮動元素未脫離文檔流的假象。也就是說，實際上IE6&IE7浮動元素也脫離了文檔流，只是由於其后元素的hasLayout被自動觸發而導致的。這里說的hasLayout被觸發，即指元素的hasLayout屬性為true。
下列元素默認hasLayout="true"：
- <html>, <body>
- <table>, <tr>, <th>, <td>
- <img>
- <hr>
- <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
- <iframe>, <embed>, <object>, <applet>
- <marquee>
下列 CSS 屬性和取值將會自動讓一個元素的hasLayout="true"：
- position: absolute
絕對定位元素的包含區塊(containing block)就會經常在這一方面出問題。 - float: left|right
由於 layout 元素的特性，浮動模型會有很多怪異的表現。 - display: inline-block
當一個內聯級別的元素需要 layout 的時候往往就要用到它，這也可能也是這個 CSS 屬性的唯一效果–讓某個元素擁有 layout。"inline-block行為"在IE中是可以實現的，但是需要注意的是： IE/Win: inline-block and hasLayout 。 - width: 除 “auto" 外的任意值
很多人遇到 layout 相關問題發生時，一般都會先嘗試用這個來修復。 - height: 除 “auto" 外的任意值
height: 1% 就在 Holly Hack 中用到。 - zoom: 除 “normal" 外的任意值
IE專有屬性。不過 zoom: 1 可以臨時用做調試。 - writing-mode: tb-rl
MS專有屬性。 - overflow: hidden|scroll|auto
在 IE7 中，overflow 也變成了一個 layout 觸發器，這個屬性在之前版本 IE 中沒有觸發 layout 的功能。 - overflow-x|-y: hidden|scroll|auto
overflow-x 和 overflow-y 是 CSS3 盒模型中的屬性，尚未得到瀏覽器的廣泛支持。他們在之前版本IE中沒有觸發 layout 的功能。 - 另外 IE7 的熒幕上又新添了幾個 haslayout 的演員，如果只從 hasLayout 這個方面考慮，min/max 和 width/height 的表現類似，position 的 fixed 和 absolute 也是一模一樣。
- position: fixed
- min-width: 任意值
就算設為0也可以讓該元素獲得 layout。 - max-width: 除 “none" 之外的任意值
- min-height: 任意值。即使設為0也可以讓該元素的 haslayout=true
- max-height: 除 “none" 之外的任意值
如果BUG是由於hasLayout未觸發所引起的，則可采用手動觸發hasLayout來解決：辦法是使用一個生僻的CSS屬性zoom來觸發，引用樣式.zoom{zoom:1}。
如果BUG是hasLayout被自動觸發而引起的，則要看觸發是什么引起的，若這元素本身就會自動觸發hasLayout，可以考慮換一個元素。若是對於這元素設置的某個CSS屬性引起的，則可以考慮刪除這屬性，倘若這屬性又是必要的，則就需要自己根據具體情況去編寫CSS Hack，因為hasLayout是只讀的，一旦hasLayout="true"后，便不可逆轉。
6.行內元素上下margin及padding不拉開元素間距的問題：行內元素的margin和padding屬性很奇怪，水平方向的padding-left、padding-right、margin-left、margin-right都產生邊距效果，但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不會產生邊距效果。例如：
HTML：
<div>塊級元素</div>
<span>行內元素</span>
CSS:
div{background:gray;padding:20px;}
span{background:green;padding:20px;margin:20px;}
各瀏覽器預覽結果：
可見豎直方向的padding、margin雖然增大了行內元素的面積，但並沒有和相鄰元素拉開距離，導致了元素重疊。
解決問題：
將行內元素display設置為block即可解決
修改后CSS：
span{background:green;padding:20px;margin:20px;display:block;}
各瀏覽器預覽結果：
但由於塊級元素與行內元素的默認樣式不同，可能會因此書寫額外的樣式代碼。比如width樣式，因為塊級元素默認占據整行。
7.IE6下select元素顯示問題：瀏覽器解析頁面時，會先判斷元素的類型，如果是窗口類型的，會優先於非窗口類型的元素，顯示在頁面最頂端，如果同屬於非窗口類型的，才會去判斷z-index的大小。select元素在IE6下是以窗口形式顯示的，這是IE6的一個Bug。導致的情況是往往想要彈出一個層，結果select元素出現在層上方。例如：
HTML：
<select><option>=請選擇=</option></select>
<div></div>
CSS：
div{
position:absolute;
background:#CCDCEE;
top:0px;
left:0px;
width:300px;
height:300px;
border:1px solid #000;
margin:5px;
}
IE6預覽結果：
解決問題：
我們可以用一個和彈出層同樣大小的iframe放在層下面，select上面，用iframe遮住select。比如設置彈出層的樣式z-index:2，iframe的樣式z-index:1，使iframe位於層下方。
修改后HTML：
<select><option>=請選擇=</option></select>
<div></div>
<iframe src="xx.htm"></iframe>
修改后CSS：
div{
position:absolute;
background:#CCDCEE;
top:0px;
left:0px;
width:300px;
height:300px;
border:1px solid #000;
margin:5px;
z-index:2;
}
iframe{
position:absolute;
top:0px;
left:0px;
width:300px;
height:300px;
margin:5px;
z-index:1;
}
我們讓iframe位於div下方，大小以及與瀏覽器的距離調整成與div一致。
IE6預覽結果：
8.IE6對png的透明度支持問題：png格式因為其優秀的壓縮算法和對透明度的完美支持，成為Web中最流行的圖片格式之一。但它存在一個眾所周知的頭疼問題---IE6下對png的透明度支持並不好。本該是透明的地方，在IE6下會顯示為淺藍色。可以使用IE下私有的濾鏡功能來解決問題，格式如下：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png圖片路徑',sizingMethod='crop')。
9.ul的不同表現：ul列表也是在IE與Firefox中容易發生問題的對象，主要源自瀏覽器對ul對象的默認值設置。在IE與Firefox中，一部分對象有默認的屬性（比如h1~h6），他們本身就帶有大字號、加粗樣式以及一些邊距效果。ul也是如此，默認情況下ul是有邊距的。例如：
HTML：
<div id="layout">
<ul>
<li>菜單一</li>
<li>菜單二</li>
<li>菜單三</li>
</ul>
</div>
CSS：
#layout{border:1px solid #333;}
ul{list-style:none;}
代碼非常簡單，僅去除了ul的列表圓點。看下在IE和Firefox的預覽效果：
IE預覽結果：
Firefox預覽結果：
顯示都很正常，關鍵在於我們對ul接下來的設置：
修改后的CSS：
#layout{border:1px solid #333;}
ul{
list-style:none;
margin-left:0px;
}
設置ul左外邊距為0后。
IE預覽結果：
Firefox預覽結果：
預覽后發現問題出現了。IE中的ul已與div靠齊，而Firefox中的ul卻絲毫不動。這是為什么？不妨把樣式修改下再看看。
修改后的CSS：
#layout{border:1px solid #333;}
ul{
list-style:none;
padding-left:0px;
}
這次我們把margin-left換成padding-left。再來看看預覽結果。
IE預覽結果：
Firefox預覽結果：
可見效果正好相反，Firefox中實現了靠齊，而IE中絲毫未動。
通過以上例子我們發現：在IE中，ul的默認邊距是margin，在Firefox中，ul的默認邊距是padding。我們單獨定義margin或padding時，自然不能在兩個瀏覽器達到一致效果。這就是ul在不同瀏覽器下表現不同的問題所在。
解決問題：
可以用hack方法分別針對IE和Firefox單獨寫樣式，但更好的做法是樣式開頭先統一ul邊距，ul{padding:0px;margin:0px;}。
10.IE3px問題：3px問題不是經常被人發現，因為它的影響只產生3px的位移。如果是精確到像素級的設計，3px的影響可謂不小。先來看下例子：
HTML：
<div id="left">左浮動div</div>
<div id="mydiv">段落</div>
CSS：
#left{
float:left;
border:1px solid #333;
width:100px;
height:100px;
}
#mydiv{
border:1px solid #f66;
margin-left:130px;
}
#left是引發Bug的一個浮動div，同時設置了邊框便於觀察。
IE預覽結果：
Firefox預覽結果：
從理論上講，我們還沒有設置#mydiv的padding，它們理所當然是緊貼邊框的。但在IE中，“段落”文字並未緊緊貼住#left。在實際中可能會因此導致內部元素寬度超出外部div固定寬度而引發布局問題。
解決問題：
是把#mydiv設置為display:inline-block。
修改后CSS：
#left{
float:left;
border:1px solid #333;
width:100px;
height:100px;
}
#mydiv{
border:1px solid #f66;
margin-left:130px;
+display:inline-block;
}
用hack方法為IE單獨設置display:inline-block后。
IE各版本預覽結果：
結果與Firefox一致。
11.高度不適應問題：高度不適應指的是，當內層對象的高度發生變化時，外層對象的高度不能自動擴展，特別是當內層對象使用padding或margin之后。高度不適應問題不是IE的專利，Firefox也出現這種問題。先來看看例子：
HTML：
<div id="box">
<p>p對象中的內容</p>
</div>
CSS：
#box{
background-color:#eee;
}
#box p{
margin-top:20px;
margin-bottom:20px;
text-align:center;
}
看看代碼做了什么，除了背景之外，#box僅是一個沒有任何樣式的div，而p加了2個關鍵屬性margin-top:20px，margin-bottom:20px;，即上下外邊距都是20px，p對象的高度應當是20+20+文字高度，即應當在40px以上。理論上#box這個div的高度會被擠開，至少達到40px以上。我們看看預覽效果。
瀏覽器預覽結果：
似乎並非預想的結果，看上去帶背景的#box還是和文字一樣高，並沒有超過40px，這是為什么呢？為了驗證一些事情，我們在html前后加上一個帶背景的div。
修改后的HTML：
<div class="box2">up</div>
<div id="box">
<p>p對象中的內容</p>
</div>
<div class="box2">down</div>
修改后的CSS：
#box{
background-color:#eee;
}
#box p{
margin-top:20px;
margin-bottom:20px;
text-align:center;
}
.box2{
background-color:#aaa;
}
再來看下預覽結果：
瀏覽器預覽結果：
可以看到上下兩個div並沒有緊貼#box對象，而是有一定的間距。測量下會發現，這個間距剛好是p對象的margin上下各20px。這個測驗證明了一個問題，就是#box對象並沒有因其中的p對象的margin變化而改變自身的高度。而p對象的margin高度的確在整個頁面中占據了一定的空間。相當於#box不動，而p把自己撐到了#box外面去了。
無論是IE還是Firefox，測試中都會發現這個問題。
解決問題：
經過一些測試，我們發現對#box定義padding或者border，就會迫使#box重新計算自己的高度，從而使自身能夠適應內容的高度變化。但如果強制給對象設置了邊距又會帶來位移。我們需要找到一個新方法，不再從對象本身的屬性入手，而是在對象的內部進行修復。我們可以在對象上下增加2個高度為0的空div，並強制內容不顯示。
修改后的HTML：
<div class="box2">up</div>
<div id="box">
<div style="height:0px;overflow:hidden"></div>
<p>p對象中的內容</p>
<div style="height:0px;overflow:hidden"></div>
</div>
<div class="box2">down</div>
這2個div只充當了占位符的角色，而不發生實際的占位。而對它的外層對象而言，由於其中多了一些邏輯占位對象使得它會重新計算高度，從而實現高度的自適應。
預覽效果：
12.IE6斷頭台問題：斷頭台問題是國外的CSS設計者給這個問題起的一個非常形象的名字，與之相反的，被切斷的不是對象的頭部，而是對象的底部。先來看下例子：
HTML：
<div id="layout">
<div id="left">
<p>W3School提供的內容僅用於培訓。我們不保證內容的正確性。通過使用本站內容隨之而來的風險與本站無關。當使用本站時，代表您已接受了本站的使用條款和隱私條款。版權所有，保留一切權利。未經書面許可，不得轉載。W3School 簡體中文版的所有內容僅供測試，對任何法律問題及風險不承擔任何責任
</p>
</div>
<a href="#">鏈接1</a><br/>
<a href="#">鏈接2</a><br/>
<a href="#">鏈接3</a><br/>
<a href="#">鏈接4</a>
</div>
XHTML代碼有三部分組成，一個是主對象#layout，主框架中有#left為左浮動對象，右側為普通的4個鏈接，類似於左右分欄的布局。
CSS：
#layout{
border:5px solid #35BB0C;
width:400px;
background-color:#F2F2F2;
}
#left{
border:5px solid #D4CA25;
width:200px;
float:left;
background-color:#fff;
}
a:hover{
background-color:#fff;
}
在CSS代碼部分，主要設置了鏈接的背景色，#left的左浮動，以便於我們觀察的粗邊框效果。先通過瀏覽器看看問題是如何發生的，見下圖：
IE6預覽效果：
這里列出了IE6網頁效果的2個狀態，當網頁被打開時，頁面正常顯示，與CSS編碼指定樣式一致。當鼠標右側的“鏈接4”時，問題出現了，主對象#layout下面被切掉了，而剩下的高度正好是4個鏈接的高度。而當鼠標移到“鏈接1”或“鏈接2”時，#layout對象的高度又恢復正常。這便是IE6斷頭台問題。
這個問題的主要原因在於鏈接上，去除鏈接的a:hover{background-color:#fff}樣式后，一切正常。經測試發現，不僅僅是background-color的變化，如果改變hover狀態下鏈接的其他屬性，也會引發同樣的問題。例如設置padding、border、加粗、斜體等，都會引發斷頭台問題。
值得注意的是，在#layout中，#left是個浮動對象，而右測是若干鏈接對象。對於未指定高度的對象而言，IE6會根據其中的內容（不管浮動與否）來計算高度的大小，而當例子中的鏈接對象是個非浮動對象，並具有hover改變border,background及padding屬性時，IE6會認為這些屬性同時會改變#layout的高度，因此它重新計算對象高度。而令人失望的是，IE6的這種自以為是的行為並沒有達到預期目的，它會把非浮動對象的總高度作為高度給了#layout，從而切斷了#left的內容。基於這類問題的產生原因，解決方案可以有多種。
解決問題：
根據問題產生的原因，我們可以做出多套解決方案。我們知道因為非浮動對象與浮動對象都在#layout中，所以我們可以從浮動方式入手，把非浮動對象改為浮動對象，這樣便可以解決問題。例如對XHTML修改如下：
<div id="layout">
<div id="left">
<p>W3School提供的內容僅用於培訓。我們不保證內容的正確性。通過使用本站內容隨之而來的風險與本站無關。當使用本站時，代表您已接受了本站的使用條款和隱私條款。版權所有，保留一切權利。未經書面許可，不得轉載。W3School 簡體中文版的所有內容僅供測試，對任何法律問題及風險不承擔任何責任
</p>
</div>
<div id="right">
<a href="#">鏈接1</a><br/>
<a href="#">鏈接2</a><br/>
<a href="#">鏈接3</a><br/>
<a href="#">鏈接4</a>
</div>
</div>
對鏈接加上個div，並設置浮動#right{float:left}。這樣使得兩個對象都成為浮動對象，不會引發問題。
也可以在#layout底部增加一個div來強制IE瀏覽器重新計算高度<div style="clear:both;"></div>，這個清除浮動內容的div會幫助瀏覽器重新找到合適的高度，從而解決斷頭台問題。
13.容器不擴展問題：容器不擴展問題是我們經常遇到的。比如我們創建了一個div嵌套結構:
HTML：
<div id="divGroup">
<div id="a">子容器a</div>
<div id="b">子容器b</div>
</div>
CSS：
#divGroup{
border:2px solid #333;
}
#a,#b{
border:2px solid #333;
float:left;
margin:5px;
}
IE預覽結果：
Firefox預覽結果：
可見外層的高度並沒有隨着子容器的高度自動擴展，卻是形成了一條線。這是因為當子容器成為浮動元素后，並脫離了文檔流。因此父容器認為自己內容為空，從而造成了這樣的結果。
解決問題：
解決方案是在容器的末尾加入個清理浮動的div。
修改后的HTML：
<div id="divGroup">
<div id="a">子容器a</div>
<div id="b">子容器b</div>
<div style="clear:both;"></div>
</div>
如果還想防止這個元素占據父元素的高度，可以進一步優化成<div style="clear:both;display:block;font:0px/0px sans-serif;"> </div>，這樣這個清除浮動的容器被認為是個不占任何高度的空格字符。在網頁中的任何地方，當遇到容器不擴展時，只需加入此段便能修復問題。
14.IE8和FireFox父子元素上下margin疊加問題：
先看下效果：
<div class="gray">
<div class="blue"></div> <div class="black"></div> </div>
.gray{ background:gray; width:200px; margin:20px; } .blue{ background:blue; width:100px; height:100px; margin:20px; } .black{ background:black; width:100px; height:100px; margin:20px; }
上圖中，藍色div和黑色div是灰色div的子元素，三個div的margin都是20，但是我們看到藍色div與其父元素的上邊界並沒有20px的間隙，黑色div與其父元素的下邊界也沒有20px的間隙，也就是說藍色div的上外邊距與其父元素的上外邊距疊加在了一起，就好像是藍色div的上外邊距跑出去了一樣。黑色div也是同理。這就是父元素與子元素的邊距疊加效果，疊加后的取值取的是兩者中較大的那個。經測試，只要父元素有border或padding，就不會觸發這個問題。然而刻意給父元素設置border或padding又會帶來位移。可采用如下方法來根本解決問題：
解決問題：給父元素設置overflow:hidden;即可解決。
再來預覽下：
IE8：
解決了。
FireFox：
也解決了。
15.IE6高度不固定問題：
典型BUG1：IE6下，即使給父元素設了固定高度，子元素還是會將其撐開。
典型BUG2：如果一個元素沒有子元素，而這個元素設置的length又小於div默認高度，則這個元素在IE6里顯示的高度仍然是div的默認高度。
引發以上2個BUG的原因在於length屬性在IE6里被當作min-length（最小高度）解析了，（換句話說，你壓根在IE6中就沒設置過固定高度，因為你設置的是最小高度）
解決辦法是再給父元素設置overflow:hidden;
16.IE6設置了最小高度並撐滿父元素高度：
默認情況下如果對IE6設置了最小高度200px，那么如果實際內容有250px，則只會顯示250px的高度。也就是高度會跟隨着內容顯示。如果此時希望無論里面內容有多少，都讓其填充滿父元素高度，則要這么設置：
height:auto!important;
height:200px;
min-height:200px;
17.IE6、IE7下浮動元素未脫離文檔流假象的問題：
對元素設置浮動后，在IE6&IE7下預覽，會產生元素未脫離文檔流的假象的現象。其實元素脫離文檔流了，這問題其實是其后的元素引起的。由於其后的元素因某些原因造成hasLayout被觸發而導致的它未去占據浮動元素的空間（這問題說起來話長，你就這么理解好了：這個大概追朔到表格布局的年代，由於單元格都是有hasLayout的，而后面單元格里的元素肯定不會跑前面的單元格里去的）。關於hasLayout，在第5條里有詳細說明，這里單獨提出來作為一條來說明，僅因為這個浮動未脫離文檔流假象的問題比較典型。
18.全屏遮罩后居中顯示一個對話層：
下面是遮罩層：絕對定位，寬高都100%，並且半透明
.over{ position:absolute; width:100%; height:100%; top:0px; left:0px; background-color:#7E9898; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; }
下面是對話層：也是絕對定位：
.confirm{ position:absolute; width:400px; height:300px; background:#FFFFFF; top:300px; left:0px; }
這里的提示層不要嵌套在遮罩層里面，否則也會受影響，變成半透明的了。要讓提示層跟遮罩層並列。
這里還有2個問題：
1.單單對遮罩層使用height:100%，只有IE6會達到效果，而其他瀏覽器一旦只會是當前可見區域遮上了，如果拖動縱向滾動條，發現下方還有沒遮蓋上。
2.用戶電腦分辨率不同，而絕對定位的提示層使用margin:300px auto也無效。
為了達到各瀏覽器網頁可見區域全部遮蓋的效果，這里用了下jquery腳本，解決以上2個問題：
$(document).ready(function(){ $("div[class='cover']").height($(document).height());//將可見區域都遮罩起來 $("div[class='confirm']").css("left",($(document).width()-($("div[class='confirm']").width()))/2+"px");//提示層居中 });
最佳實踐：
1.寫DTD聲明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.引入base.css重置各瀏覽器默認屬性值：
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0px;padding:0px;} table{border-collapse:collapse;border-spacing:0px;} fieldset,img,abbr,acronym{border:0px;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} ol,ul{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';}
3.同時為一個元素寫float和margin-left（margin-right）的時候，習慣性地想到IE6會雙倍邊距，用display:inline解決。
4.為子元素寫margin-top或margin-bottom的時候，習慣性的去思考父元素是否有padding或border屬性，從而斷定是否會在IE6&IE7上產生上下外邊距重合問題。如果有問題用overflow:hidden;解決。
5.給元素設了固定高度后，習慣性地再設個overflow:hidden;從而避免IE6上高度繼續擴展的問題。
6.必要時候要clear，<div style="clear:both;"></div>。
7.對於文本，在使用margin-left、padding-left、margin-top、padding-top之前優先考慮是否可用text-indent和line-height代替。因為計算尺寸的代價相對來說要大些。
如能做到以上幾點，就已經避免了90%的瀏覽器兼容性問題。