一、從瀏覽器核心的角度 來看，瀏覽器相容性問題可分為以下三類：
1. 渲染相關：和樣式相關的問題，即體現在佈局效果上的問題。
2. 指令碼相關：和指令碼相關的問題，包括JavaScript和DOM、BOM方面的問題。對於某些瀏覽器的功能方面的特性，也屬於這一類。
3. 其他類別：除以上兩類問題外的功能性問題，一般是瀏覽器自身提供的功能，在核心層之上的。
二、瀏覽器相容性相關問題及其解決思路
1、目前，各主流瀏覽器的新版本，對於 W3C 的標準支援很好，因此，首先保證程式碼符合 W3C 的標準，這是解決瀏覽器相容問題的前提。
其次，對於某些支援受限的屬性，針對不同的瀏覽器新增相應的字首，比如-webkit-、-o-、-moz-。
2、不同瀏覽器預設的內外邊距不同的問題
解決： *{margin:0;padding:0;}
3、不同瀏覽器水平居中的問題：ie6-7文字居中，巢狀的塊元素也會居中 ，ff /opera /safari /ie8文字會居中，巢狀塊不會居中
解決： 塊元素設定 margin-left:auto;margin-right:auto 或margin:0 auto; 或外層巢狀div設定<div align=”center”></div>
浮動塊元素的居中：<div style="margin:0px auto;"><div style="float:left;"></div></div>
4、不同瀏覽器垂直居中的問題 ： 在瀏覽器中 想要垂直居中，設定vertical-align:middle; 不起作用。例如：ie6下文字與文字輸入框對不齊，需設定
vertical-align:middle，但是文字框的內容不會垂直居中
解決： 給容器設定一個與其高度相同的行高 line-height:與容器的height一樣
5、不同瀏覽器關於高度問題 ： 如果是動態地新增內容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態的內容，高度最好定好。 如果設定了高度，內容過 多時，ie6下會自動增加高度、其他瀏覽器會超出邊框
解決： 1.設定overflow:hidden; 2.高度自增height:auto!important;height:100px;
6、IE6 預設的div高度問題： ie6預設div高度為一個字型顯示的高度，在ie6下div的高度大於等於一個字的高度，因此在ie6下定義高度為1px的容器，顯示的是一個字 體的高度
解決：為這個容器設定下列屬性之一 1、設定overflow:hidden; 2、設定line-height:1px; 3、設定zoom:0.08
7、IE6 最小高度(寬度)的問題： ie6不支援min-height、min-width屬性，預設height是最小高度，width是最小寬度。
解決： 使用ie6不支援但其餘瀏覽器支援的屬性!important。 設定屬性min-height:200px; height:auto !important; height:200px;
8、td高度的問題 ： table中td的寬度都不包含border的寬度，但是oprea和ff中td的高度包含了border的高度
解決： 設定line-height和height一樣。在ie中如果td中的沒有內容，那麼border將不會顯示
9、div巢狀p時，出現空白行問題：div中顯示<p>文字</p>，ff、oprea、Chrome：top和bottom都會出現空白行，但是在ie下不會出現空白行。
解決：設定p的margin:0px，再設定div的padding-top和padding-bottom
10、IE6-7圖片下面有空隙的問題：塊元素中含有圖片時，ie6-7中會出現圖片下有空隙
解決：1、在原始碼中讓</div>和<img>在同一行
2、將圖片轉換為塊級物件display:block;
3、設定圖片的垂直對齊方式 vertical-align:top/middle/bottom
4、改變父物件的屬性，如果父物件的寬、高固定，圖片大小隨父物件而定，那麼可以對父元素設定： overflow:hidden;
5、設定圖片的浮動屬性 float:left;
11、IE6雙倍邊距的問題 ： ie6中設定浮動，同時又設定margin時，會出現雙倍邊距的問題 例float:left;width:100px;margin:0 100px;
解決： 設定display:inline;
12、IE6兩個層之間3px的問題： 左邊層採用浮動，右邊沒有采用浮動，這時在ie6中兩層之間就會產生3畫素的間距
解決： 1、右邊層也採用浮動 float 2、左邊層新增屬性 margin-right:-3px;
13、IE6 子元素絕對定位的問題： 父級元素使用padding後，子元素使用絕對定位，不能精確定位
解決： 在子元素中設定 _left:-20px; _top:-1px;
14、顯示手型cursor:hand 問題： ie6/7/8、opera 都支援 ，但是safari 、 ff 不支援
解決： 寫成 cursor:pointer; (所有瀏覽器都能識別)
15、IE6-7 line-height失效的問題： 在ie中img與文字放一起時， line-height不起作用
解決：都設定成float
16、td自動換行的問題 ： Table寬度固定，td自動換行
解決： 設定Table的table-layout:fixed，td的word-wrap:break-word
17、子容器浮動後，父容器擴充套件問題： 子容器都float以後，父容器沒有設定高度,父容器將不會擴充套件
解決： 只需要新增一個clear:both的div，程式碼如下：
<div style="border:1px solid #333;width:204px">
<div style="width:100px;border:1px solid #333; float:left; ">子容器a</div>
<div style="width:100px;border:1px solid #333; float:left;">子容器b</div>
<div style="clear:both"></div>
</div>
18、透明png圖片會帶背景色問題： 在ie6下透明的png圖片會帶一個背景色
解決：
background-image: url(icon_home.png);/* 其他瀏覽器 */
background-repeat: no-repeat;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */
_background-image: none; /* IE6 */
19、list-style-position預設值的問題： ie下list-style-position預設為inside, firefox預設為outside
解決： css中指定為outside即可解決相容性問題
20、 list-style-image準確定位的問題： li前設定圖片時，圖片與其後的文字對齊問題
解決：1、採用背景定位 和 字元縮排的方法 background:url() no-repeat left center; text-index:16px;
2、採用相對定位方法 li 設定list-style:url(); li的子元素position:relative;top:-5px;
21、ul標籤預設值的問題 ： ul標籤在ff中預設是有padding值的,而在ie中只有margin有值
解決： 定義ul{margin:0;padding:0;}就能解決大部分問題
22、IE中li指定高度後，出現排版錯誤 問題： 在ie下如果為li指定高度可能會出現排版錯位
解決： 設定line-height
23、ul或li浮動後，顯示在div外 問題： div中的ul或li設定float以後，都不在div中
解決： 必須在ul標籤後加<div style="clear:both"></div>來閉合外層div
24、ul或者li浮動後，margin變大 問題： ul設定 float後，在ie中margin將變大
解決： 設定ul的display:inline，li的list-style-position:outside；li浮動問題設定li的display:inline
25、巢狀使用ul、li的問題： ie的bug，巢狀使用ul、li時，裡層的li設定float以後，外層li不設定float, 裡面的ul頂部和它外面的li總是有一段間距
解決： 設定裡面的ul的zoom:1
26、 IE6-7 li底部有3px的問題 ：這個bug產生的充要條件是li的子元素浮動並且li設定了以下CSS屬性之一：width、height、zoom、padding-top、padding-bottom、 margin-top、margin-bottom。
解決：
1、div設定clear:left|both，這時li不能設定width、height、zoom。
2、li設定float:left，這時li可以設定width、height、zoom。
3、li設定clear:left|both，這時li不能設定width、height、zoom。
4、IE6/IE7的這個Bug可以通過給li中的div設定vertical-align:top|middle|bottom解決。
27、IE6 垂直列表間隙的問題： li中有a且設定display:block時，ie6中列表間會出現空隙
解決： 1、li中加display:inline; 2、li使用float 然後 clear:both; 3、給包含的文字末尾新增一個空格 4、設定width
28、IE6 列表背景顏色失效的問題 ： 當父元素設定position:relative;時，在ie6中第一個ul、ol、dl的背景顏色失效
解決： ul、ol、dl 都設定為position:relative;
29、IE6-7 列表背景顏色失效的問題2 ： 做橫向導航欄時，ul設定為float且有背景色，li設定為float。ie6-7背景顏色失效
解決： 很多ie的bug都可以通過觸發layout來解決 ul新增屬性 1、height:1%; 2、float:left; 3、zoom:1;
30、列表不能換行的問題 ： li設定為浮動，後面的li緊隨其後，不能換行
解決： 1、為這個ul定義合適的寬高 2、給包含這個ul 的父div定義合適的寬高。
31、超連結訪問過後hover樣式不出現的問題 ： 擊超連結後，hover、active樣式沒有效果
解決： 改變CSS屬性的排列順序: L-V-H-A
32、 禁用中文輸入法的問題 ： 不能在輸入框中輸入漢字
解決： 只在ie系列 和ff中有效 ime-mode:disabled (但可以貼上) 禁用貼上： onpaste="return false"
33、除去滾動條的問題 ： 隱藏滾動條
解決： 1、只有ie6-7支援<body scroll="no"> 2、除ie6-7不支援 body{overflow:hidden} 3、所有瀏覽器 html{overflow:hidden}
34、讓層顯示在FLASH之上：
解決：把FLASH設定透明 1、<param name=" wmode " value="transparent" /> 2、<param name="wmode" value="opaque"/>
35、去除連結虛線邊框的問題 ： 當點選超連結後，ie6/7/8 ff會出現虛線邊框 ,而opera、safari沒有虛線邊框
解決： ie6/7中 設定為a { blr:expression(this.onFocus=this.blur()) } ie8 和 ff 都不支援expression 在ie8 、ff中設定為 :focus { outline: none; }
36、css濾鏡的問題 ： css濾鏡只在ie中有效，Firefox, Safari(WebKit), Opera只能夠設定透明，它們不支援濾鏡filter，無法實現圖片切換中間變換的效果，只能通過透明度來 設定。
解決： ff中設定透明度 -moz-opacity:0.10; opacity:0.6; ie中只設定filter:alpha(opacity=50); 時，ie6-7失效，還要設定 1、zoom:1; 2、width:100%;
37、IE6背景閃爍的問題：連結、按鈕用CSS sprites作為背景，在ie6下會有背景圖閃爍的現象。原因是:IE6沒有將背景圖快取，每次觸發hover的時候都會重新載入
解決：用JavaScript設定ie6快取這些圖片： document.execCommand("BackgroundImageCache ",false,true);
38、ff、chrome絕對定位無效 問題： 在IE給td設定position:relative，然後給它包含的一個容器使用position:absolute進行定位是有效的，但在FF和Chrome下卻不可以。
解決：設定td的display:block。
39、IE6 絕對定位的問題 問題：
<div style="position:relative;border:1px solid orange;text-align:center;">
<div style="position:absolute;top:0;left:0; background:#CCC;">dovapour</div>
<a href="#" title="vapour的blog">內容</a>
</div>
解決：
left的定位錯誤問題
1、給父層設定zoom:1觸發layout。 2、給父層設定寬度width
bottom的定位錯誤問題
1、給父層設定zoom:1觸發layout。 2、給父層設定高度height
40、float的div閉合的問題：
例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >這裡的NOTfloatC並不希望繼續平移，而是希望往下排。(其中floatA、floatB的屬性已經設定為 float:left;)
這段程式碼在IE中毫無問題，問題出在其他瀏覽器中。原因是NOTfloatC並非float標籤，必須將float標籤 閉合。
解決：
在 <#div class=”floatB”> <#div class=”NOTfloatC”>之間加上 < #div class=”clear”>這個div一定要注意位置，而且必須與兩個具有float屬性的div同級，之間不能存在巢狀關係，否則會 產生異常。並且將clear這種樣式定義為為如下即可：.clear{ clear:both;}
41、選框、核取方塊與後面的文字對不齊 問題：
解決：
.align{font-size:12px;}
.align input{ display:block; float:left;}
.align label{ display:block; float:left; padding-top:3px; *padding-top:5px;}
不足之處：設定padding後高度和寬頻都會增加
42、邊框重疊說明 說明：
為 table、td 都指定了邊框後，然後使用border-collapse:collapse讓邊框重疊，可以看出在發生重疊時，Firefox 是用 td 覆蓋 table 的，而 IE 是用 table 覆蓋 td 的。使用時候需要注意。
43、設定td padding的說明：
設定td的padding以後高度和寬頻都會增加,padding-left和padding-right的效果都一樣增加了td的寬頻，但是padding-top和padding-bottom的效果不一樣。最好不要使用td的ding-top和padding-bottom
44、使一個層垂直居中於瀏覽器中 說明：
使用百分比絕對定位,與外補丁負值的技巧,負值的大小為其自身寬度高度除以二
div { position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; }
45、行內屬性標籤，設定display:block後採用float佈局，又有橫行的margin的情況，IE6間距bug，IE6裡的間距比超過設定的間距
解決：在display:block;後面加入display:inline;display:table;
備註：行內屬性標籤，為了設定寬高，我們需要設定display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行內屬性標籤，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。
46、float的div閉合;清除浮動;自適應高度;
① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >這裡的NOTfloatC並不希望繼續平移，而是希望往下排。(其中floatA、floatB的屬性已經設定為 float:left;) 這段程式碼在IE中毫無問題，問題出在FF。原因是NOTfloatC並非float標籤，必須將float標籤閉合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之間加上 < #div class=”clear”>這個div一定要注意位置，而且必須與兩個具有float屬性的div同級，之間不能存在巢狀關係，否則會產生異常。並且將clear這種樣式定義為為如下即可： .clear{ clear:both;}
②作為外部 wrapper 的 div 不要定死高度,為了讓高度能自動適應，要在wrapper裡面加上overflow:hidden; 當包含float的 box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性，用zoom:1;可以做到，這樣就達到了相容。 例如某一個wrapper如下定義： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
③對於排版,我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div後面做一個統一的背景,譬如: <div id=”page”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> 比如我們要將page的背景設定成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發現隨著left center right的向下拉長,而 page居然儲存高度不變,問題來了,原因在於page不是float屬性,而我們的page由於要居中,不能設定成float,所以我們應該這樣解決 <div id=”page”> <div id=”bg” style=”float:left;width:100%”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> </div> 再嵌入一個float left而寬度是100%的DIV解決之
④萬能float 閉合(非常重要!) 關於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup],將以下程式碼加入Global CSS 中,給需要閉合的div加上 class="clearfix" 即可,屢試不爽. /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ 或者這樣設定：.hackbox{ display:table; //將物件作為塊元素級的表格顯示}
三、csshack的使用
CSS Hack大致有3種表現形式，CSS類內部Hack、選擇器Hack以及HTML頭部引用(if IE)Hack，
1、CSS類內部Hack，使用了漸進識別的方式，從總體中逐漸排除區域性。首先，巧妙的使用“\9”這一標記，將IE遊覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，最後用“_”將IE7、IE6區分。
.bb{ height:32px; background-color:#f1ee18;/*所有識別*/ .background-color:#00deff\9; /*IE6、7、8識別*/ +background-color:#a200ff;/*IE6、7識別*/ _background-color:#1e0bd1;/*IE6識別*/ } /*一個用於展示的class為bb的div標籤*/ < div class ="bb"></ div >
2、HTML頭部引用(if IE)Hack
只在IE下生效
<!--[if IE]>
這段文字只在IE瀏覽器顯示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
這段文字只在IE6瀏覽器顯示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
這段文字只在IE6以上(包括)版本IE瀏覽器顯示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
這段文字在非IE8瀏覽器顯示
<![endif]-->
非IE瀏覽器生效
<!--[if !IE]>
這段文字只在非IE瀏覽器顯示
<![endif]-->
3、選擇器Hack
選擇器字首法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的字首進行hack。
比如：
*html *字首只對IE6生效*
+html *+字首只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
csshack彙總表
