常見瀏覽器兼容性問題與解決方案
所謂的瀏覽器兼容性問題，是指因爲不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論用戶用什麼瀏覽器來查看我們的網站或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的兼容性問題是前端開發人員經常會碰到和必須要解決的問題。 在學習瀏覽器兼容性之前，我想把前端開發人員劃分爲兩類：
第一類是精確按照設計圖開發的前端開發人員，可以說是精確到1px的，他們很容易就會發現設計圖的不足，並且在很少的情況下會碰到瀏覽器的兼容性問題，而這些問題往往都死瀏覽器的bug，並且他們製作的頁面後期易維護，代碼重用問題少，可以說是比較牢固放心的代碼。
第二類是基本按照設計圖來開發的前端開發人員，很多細枝末節差距很大，不如間距，行高，圖片位置等等經常會差幾px。某種效果的實現也是反覆調試得到，具體爲什麼出現這種效果還模模糊糊，整體佈局十分脆弱。稍有改動就亂七八糟。代碼爲什麼這麼寫還不知所以然。這類開發人員往往經常爲兼容性問題所困。修改好了這個瀏覽器又亂了另一個瀏覽器。改來改去也毫無頭緒。其實他們碰到的兼容性問題大部分不應該歸咎於瀏覽器，而是他們的技術本身了。
瀏覽器兼容問題一：不同瀏覽器的標籤默認的外補丁和內補丁不同
問題症狀：隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大。 碰到頻率:100% 解決方案：CSS裏 * {margin=0 px;padding=0px;}
備註：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符*來設置各個標籤的內外補丁是0。
瀏覽器兼容問題二：塊屬性標籤float後，又有橫行的margin情況下，在IE6顯示margin比設置的大
問題症狀:常見症狀是IE6中後面的一塊被頂到下一行
解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化爲行內屬性
備註：我們最常用的就是div+CSS佈局了，而div就是一個典型的塊屬性標籤，橫向佈局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。
瀏覽器兼容問題三：設置較小高度標籤（一般小於10px），在IE6，IE7，遨遊中高度超出自己設置高度
問題症狀：IE6、7和遨遊裏這個標籤的高度不受控制，超出自己設置的高度 碰到頻率：60%
解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度。
備註：這種情況一般出現在我們設置小圓角背景的標籤裏。出現這個問題的原因是IE8之前的瀏覽器都會給標籤一個最小默認的行高的高度。即使你的標籤是空的，這個標籤的高度還是會達到默認的行高。
瀏覽器兼容問題四：行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的情況，IE6間距bug 問題症狀：IE6裏的間距比超過設置的間距 碰到機率：20%
解決方案：在display:block;後面加入display:inline;display:table;
備註：行內屬性標籤，爲了設置寬高，我們需要設置display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具有了塊屬性float後的橫向margin的bug。不過因爲它本身就是行內屬性標籤，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。
瀏覽器兼容問題五：圖片默認有間距
問題症狀：幾個img標籤放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。
解決方案：使用float屬性爲img佈局
備註：因爲img標籤是行內屬性標籤，所以只要不超出容器寬度，img標籤都會排在一行裏，但是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。（我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）
瀏覽器兼容問題六：標籤最低高度設置min-height不兼容
問題症狀：因爲min-height本身就是一個不兼容的CSS屬性，所以設置min-height時不能很好的被各個瀏瀏覽器兼容
解決方案：如果我們要設置一個標籤的最小高度200px，需要進行的設置爲：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備註：在B/S系統前端開時，有很多情況下我們又這種需求。當內容小於一個值（如300px）時。容器的高度爲300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題
瀏覽器兼問題七：透明度的兼容CSS設置
做兼容頁面的方法是：每寫一小段代碼（佈局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當然熟練到一定的程度就沒這麼麻煩了。建議經常會碰到兼容性問題的新手使用。很多兼容性問題都是因爲瀏覽器對標籤的默認屬性解析不同造成的，只要我們稍加設置都能輕鬆地解決這些兼容問題。如果我們熟悉標籤的默認屬性的話，就能很好的理解爲什麼會出現兼容問題以及怎麼去解決這些兼容問題。
瀏覽器兼容問題八：！important功能有限
問題症狀：隨着IE7對！important的支持，！important方法現在只對IE6兼容。（注意寫法，記得該聲明位置需要提前。）
例如：
.example{
width:100px !important;/* IE7 + FF*/
width:200px; /IE6/
}
瀏覽器兼容問題九：float閉合（clearing float）
問題症狀：網頁在某些瀏覽器上顯示錯位很多時候都是因爲使用了float浮動二沒有真正閉合，這也是div無法自適應高度的一個原因。如果父div沒有設float而其子卻設了float的話。父div無法包住整個div，這種情況一般出現在一個父div下包含多個div。
解決方案：
1、給父div也設上一個float（不要打我，我知道是廢話）
2、在所有div後新加一個空div（不推薦，有些瀏覽器可以看見div產生的空隙）
3、將以下代碼加入Global CSS 中,給需要閉合的div加上 class=”clearfix” 即可,屢試不爽.
代碼:
〈style〉
/* 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 */
〈/style〉
4、overflow：auto；
只要在父div的CSS中加入overflow：auto；就搞定了。
需要注意的一些兼容細節
1、FF下給div設置padding後會導致width和height增加（div的實際寬度=div寬度+padding）但IE不會
解決方法：給div設定IE、FF兩個寬度，在IE的寬度前加上IE特有的標記“*”號。
2、頁面居中問題
body{text-align：center；}在IE下就足夠了，但FF下失效了。
解決方法：加上“margin-right：auto；margin-left：auto；”
3、有時候在IE6上看見一些奇怪的間隙，可我們高度明明設好了。
解決方法：試試在有空隙的div上加上“font-size：0px；”
4、關於手形光標：cursor：pointer；而hand只適用於IE
5、浮動IE6產生的雙倍距離
.box{
width:100px;
margin:0 0 0 100px;
}
這種情況之下的IE6會產生200px的距離
解決方法：加上display:inline,使浮動忽略。這裏細說一下block，inline兩個元素，block元素的特點是：總是在新行上開始，高度，寬度，行高，邊距都可以控制（塊元素）；inline元素爲內嵌元素模擬爲塊元素display：inline；//實現一行排列的效果
6、頁面的最小寬度
min-width是一個非常方便的ＣＳＳ命令，它可以指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得min這個定義，但實際上他把正常的width和height當作有min的情況來使用。這樣的問題就大了，如果只用寬度和高度，正常的瀏覽器裏這兩個值就不會便變，如果只用min-with和min-height的話，IE下面根本等於沒有設置寬度和高度。比如要設置背景圖片，這個寬度是比較重要的。
解決方案：爲了讓這一命令在IE下也能使用，可以把一個< div >放到< body >標籤下，然後爲div指定一個類：
然後CSS這樣設計：
.container{
min-width: 600px;
width:expression(document.body.clientWidth 〈 600? “600px”: “auto” );
}
第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。
7、UL和FORM標籤的padding與margin
ul標籤在FF中默認是有padding值的,而在IE中只有margin默認有值。FORM標籤在IE中,將會自動margin一些邊距,而在FF中margin則是0；
解決辦法：css中首先都使用這樣的樣式ul,form{margin:0;padding:0;}給定義死了,後面就不會爲這個頭疼了.
8 ,DIV浮動IE文本產生3象素的bug
下面這段是我在網上粘過來的
左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.
.box{
float:left;
width:800px;}
.left{
float:left;
width:50%;}
.right{
width:50%;
}
*html #left{
margin-right:-3px;
//這句是關鍵
}
HTML代碼
〈DIV id=box〉
〈DIV id=left〉〈/DIV〉
〈DIV id=right〉〈/DIV〉
〈/DIV〉
針對上面這段代碼，下面說一下我的理解：
第一、只要right定義了width屬性，在FF下絕對就會兩行顯示
第二、兩個width都定義爲百分比的話，就算都爲100%在IE下也會一行顯示。所以上面那句所謂“這句是關鍵”根本沒用，不加也在一行，除非你width定義的是數值才用得上。
所以說上面這段代碼其實用處不大，至少在FF下不行。其實只要只定義left的width就行了，right不定義width就不管在IE還是FF下都能成功，但這樣的話父DIV BOX並沒有真正的包含LEFT和RIGHT兩子DIV,可以用我上面說的第5種辦法解決。最簡單的辦法就是在RIGHT中加上float:left就OK了，真磨嘰！
最後附上ＣＳＳ ＨＡＣＫ的方法（新手可以看看，高手就當路過吧）
首先需要知道的是：
所有瀏覽器通用
所有瀏覽器 通用 height:
100px;
IE6 專用 _height: 100px;
IE7 專用 *+height: 100px;
IE6、IE7 共用 *height:
100px;
IE7、FF 共用 height: 100px
!important;
例如：
．example { height:100px; } /FF /
* html #example {height:200px; } /* IE6 */
+html #example {height:300px; } / IE7 */
下面的這種方法比較簡單
舉幾個例子：
1、IE6 - IE7+FF
．example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
其實這個用上面說的第一種方法也可以
．example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}
2、IE6+IE7 - FF
．example {
height:100px; /* FF */
height:200px; / IE6+IE7 */
}
3、IE6+FF - IE7
．example {
height:100px; /* IE6+FF */
+height:200px; / IE7 */
}
4、IE6 IE7 FF 各不相同
．example {
height:100px; /* FF */
_height:200px; /* IE6 */
+height:300px; / IE7 */
}
或：
．example {
height:100px; /* FF */
height:300px; / IE7 */
_height:200px; /* IE6 */
}
需要注意的是，代碼的順序一定不能顛倒了，要不又前功盡棄了。因爲瀏覽器在解釋程序的時候，如果重名的話，會用後面的覆蓋前面的，就象給變量賦值一個道理，所以我們把通用的放前面，越專用的越放後面．
