十 . css系列之兼容問題

（一）瀏覽器簡介

1 .瀏覽器：網頁瀏覽工具，發展歷史如下：

真正開啓現在互聯網時代的瀏覽器，是在1993年發佈的Mosaic。
其後是Netscape Navigator（網景領航者，簡稱NN，持續時間爲1994-2008）

2 .瀏覽器內核：瀏覽器最關鍵的部分就是它的渲染引擎（Rendering Engine），也就是大家平常所說的“內核”。（所謂內核，就是常駐內存、能夠快速響應的那一部分核心代碼，非內核代碼都是要用到時再調入內存並執行的）

Trident內核（又稱爲MSHTML）：代表產品Internet Explorer，又稱其爲IE內核
Gecko內核：代表作品Mozilla Firefox
WebKit內核：主要代表作品有Safari和Google的瀏覽器Chrome。
Blink：由Google和Opera開發的瀏覽器排版引擎，2013年4月發佈

3 .什麼是瀏覽器兼容問題？

答：所謂的瀏覽器兼容性問題，是指因爲不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。
> 瀏覽器兼容產生原因是什麼？
a.因爲不同瀏覽器使用內核不同
b.用戶客戶端的環境不同（如分辨率不同）。
> 瀏覽器兼容的主要表現是什麼？
a.不同瀏覽器對同一段代碼有不用的解析，造成頁面顯示效果不統一的情況（JS、HTML、CSS的兼容性），如border-radius這個屬性低版本的IE是不支持的
b.不同的瀏覽器的默認值表現是由差別的，如：margin、padding兩個屬性在IE和FF下默認值是不同的

（二）常見問題及解決——圖片

1.圖片下方有空隙產生

解決辦法：
    a)img{display:block;}
    b)父元素font-size:0;

2.在各個瀏覽器下img間有空隙

解決方法：
    a)方法1：將代碼寫在一行上
    b)給圖片設置浮動效果
    c)設置父元素font-size：0或Word-spacing：負值

3.IE6下給圖片加超鏈接時，圖片自動會加上邊框（紫色兩像素的邊框）

解決辦法：img{border:none或0}

4.給圖片加超級鏈接，並且設置a{border:1px solid}，此時邊框顯示一半問題

解決辦法：
    a)IE6中：邊框給a標籤添加，並且把a標籤 打成塊級元素。A:hover時加邊框就不會出現一半的問題了
    b)其它：給圖片加邊框而不是給a：hover標籤加邊框,並且沒放上去之前也要給圖片加個1像素的邊框。

5.Input與img垂直方向不對齊問題

解決辦法：img{vertical-align:middle}

（三）常見問題及解決——邊距

1.不同瀏覽器的標籤默認的外補丁和內補丁不同

解決辦法：*{margin:0;padding:0;}

2.兩個塊元素，豎向的margin值不增加，會重疊，其間距爲最大margin值

3.IE6橫向margin加倍（產生因素：塊屬性、float、有橫向margin ）

解決方法：display：inline；

4.給子元素加margin-top時，瀏覽器中是給父元素添加了margin-top的值了

解決方法：給父元素添加padding-top或者在給子元素添加margin-top的同時給父元素添加padding-top:0.1px;

5.經典3像素bug（產生條件：IE6瀏覽器，浮動塊元素與未浮動塊元素處於同一行，有默認的3px間距。）

解決辦法：設置非浮動元素浮動。

6.高度自適應問題（最小高度）： IE6不認識min-height，IE6裏的內容會自動撐開

解決辦法：div { height:auto!important; height:200px; min-height:200px; }

7.a標籤hover不適用於所有標籤

 產生條件：IE6瀏覽器中hover只支持a標籤的使用，不支持一切其它標籤使用；
 解決辦法：合理用a標籤嵌套其他行內標籤

8.一行文本垂直居中問題

vertical-align: middle;/*不管用*/
 解決辦法：
     height:30px;
     line-height:30px;