瀏覽器兼容
為什么會有兼容問題？
由於市場上瀏覽器種類眾多，而不同瀏覽器其內核亦不盡相同，所以各個瀏覽器對網頁的解析就有一定出入，這也是導致瀏覽器兼容問題出現的主要原因，我們的網頁需要在主流瀏覽器上正常運行，就需要做好瀏覽器兼容。現在市面上使用較多的內核例如：
使用Trident內核的瀏覽器：IE、Maxthon、TT；
使用Gecko內核的瀏覽器：Netcape6及以上版本、FireFox；
使用Presto內核的瀏覽器：Opera7及以上版本；
使用Webkit內核的瀏覽器：Safari、Chrome。
主要的兼容問題也是出在IE瀏覽器和其它流行的瀏覽器之間的問題，對於IE瀏覽器本身而已，每個版本跨度都有差別，IE8以上和IE8以下都存在很多兼容的問題。
在前端的工作中解決瀏覽器兼容問題是我們必須掌握的一項技能。
對瀏覽器兼容問題，可以總結為HTML，Javascript兼容，CSS兼容。 其中html相關問題比較容易處理，無非是高版本瀏覽器用了低版本瀏覽器無法識別的元素，導致其不能解析，所以平時注意一點就是。特別是HTML5增加了許多新標簽，低版本瀏覽器有點影響時代進步啊。
css是一個難點，css兼容問題是主要的瀏覽器兼容問題，解決css兼容問題是至關重要的。
這里就簡單介紹一些css兼容問題和解決方法。
1.css hake技術，對兼容問題了解不深時，常常采用的方法。
1、區別IE6,IE7,IE8,FF
【區別符號】：「\9」、「*」、「_」
2、區別IE6、IE7、Firefox(方法1)
【區別符號】：「*」、「_」
3、區別IE6、IE7、Firefox(方法2)
【區別符號】：「*」、「!important」
4、區別IE6、IE7(方法1)
【區別符號】：「*」、「_」
5、區別IE6、IE7(方法2)
【區別符號】：「!important」
2.條件注釋法
<!--[if lte IE 6]> 這段文字僅顯示在 IE6及IE6以下版本。 <![endif]-->
<!--[if gte IE 6]> 這段文字僅顯示在 IE6及IE6以上版本。 <![endif]-->
<!--[if gt IE 6]> 這段文字僅顯示在 IE6以上版本（不包含IE6）。 <![endif]-->
<!--[if IE 5.5]> 這段文字僅顯示在 IE5.5。 <![endif]-->
<!--在 IE6及IE6以下版本中加載css-->
<!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]-->
缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
3.一些常見的兼容性問題bug
1、IE6怪異解析之padding與border算入寬高
原因：未加文檔聲明造成非盒模型解析
解決方法：加入文檔聲明<!doctype html>
2、IE6在塊元素、左右浮動、設定marin時造成margin雙倍（雙邊距）
解決方法：display:inline
3、以下三種其實是同一種bug，其實也不算是個bug，舉個例子：父標簽高度20，子標簽11，垂直居中，20-11=9，9要分給文字的上面與下面，怎么分？IE6就會與其它的不同，所以，盡量避免。
1）字體大小為奇數之邊框高度少1px
解決方法：字體大小設置為偶數或line-height為偶數
2）line-height，文本垂直居中差1px
解決方法：padding-top代替line-height居中，或line-height加1或減1
3）與父標簽的寬度的奇偶不同的居中造成1px的偏離
解決方法：如果父標簽是奇數寬度，則子標簽也用奇數寬度;如果是父標簽偶數寬度，則子標簽也用偶數寬度
4、內部盒模型超出父級時，父級被撐大
解決方法：父標簽使用overflow:hidden
5、line-height默認行高bug
解決方法：line-height設值
6、行標簽之間會有一小段空白
解決方法：float或結構並排(可讀性差，不建議)
7、標簽高度無法小於19px
解決方法：overflow: hidden;
8、左浮元素margin-bottom失效
解決方法：顯示設置高度 or 父標簽設置_padding-bottom代替子標簽的margin-bottom or 再放個標簽讓父標簽浮動，子標簽
margin- bottom，即(margin-bottom與float不同時作用於一個標簽)
9、img於塊元素中，底邊多出空白
解決方法：父級設置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;
10、li之間會有間距
解決方法：float: left;
11、塊元素中有文字及右浮動的行元素，行元素換行
解決方法：將行元素置於塊元素內的文字前
12、position下的left，bottom錯位
解決方法：為父級(relative層)設置寬高或添加*zoom:1
13、子級中有設置position，則父級overflow失效
解決方法：為父級設置position:relative
14、 IE6下圖片下方有空隙產生；解決這個BUG的方法也有很多,可以是改變html的排版,或者設置img 為display:block，
或者設置vertical-align 屬性為vertical-align:top bottom middle text-bottom都可以解決.（但是最近我發現這個問題在其它瀏覽器中也有所體現）
15、IE6 3px bug 兩個浮動層中間有間隙，這個IE的3PX BUG也是經常出現的,
解決的辦法是給右邊元素也同樣浮動 float:left 或者相對IE6定義.left margin-right:-3px;
經典兩列布局，float: left;width:200px; 第二個，margin-left,200px; 他們之間會產生3px的間距。
16、 在IE6中沒有min-width的概念，其默認width就是min-width，所以有時字體過多它會選擇撐開容器。
17、 IE6無法定義1px左右高度的容器，是因為默認的行高造成的,解決的方法也有很多, 例如: overflow:hidden zoom:0.08 line-height:1px ⑦ 使用margin ： 0 auto；方法使容器居中依然在IE6中行不通，我們要對其父容器使用
18、被點擊訪問過的超鏈接樣式不在具有hover和active了,很多人應該都遇到過這個問題, 解決方法是改變CSS屬性的排列順序: L-V-H-A <style type=”text/css”> a:link {} a:visited {} a:hover {} a:active {} /style>
19、 在使用絕對定位/相對定位時，設置z-index在ie中可能會失效，是因為其元素依賴於其父元素的z-index，而父元素默認為0 ？所以子元素z-index高，而父元素底，依然不會改變其顯示順序；
文章來自http://www.cnblogs.com/hexi1/p/4580192.html