1.為什么會出現(xiàn)瀏覽器兼容問題？

由于各大主流瀏覽器由不同的廠家開發(fā)，所用的核心架構(gòu)和代碼也很難重和，這就為各種莫名其妙的Bug(代碼錯誤）提供了溫床。再加上各大廠商出于自身利益考慮而設(shè)置的種種技術(shù)壁壘，讓CSS應(yīng)用起來比想象得要麻煩。瀏覽器的兼容問題是我們必須去克服的。

2.關(guān)于瀏覽器
1）主流瀏覽器
Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游

2）最早的瀏覽器 : Mosaic / Netscape Navigator(網(wǎng)景領(lǐng)航者)（1994-2008）簡稱NN

3)瀏覽器大戰(zhàn)

第一次瀏覽器大戰(zhàn)發(fā)生在上個世紀90年代，微軟發(fā)布了它的IE瀏覽器，和網(wǎng)景公司的Netscape Navigator大打出手。

第二次瀏覽器大戰(zhàn)發(fā)生在20世紀。

4）瀏覽器內(nèi)核及代表作品

瀏覽器最關(guān)鍵的部分就是它的渲染引擎（Rendering Engine），也就是大家平常所說的的“內(nèi)核”。

3、聊聊主流瀏覽器

a、看看五大瀏覽器的內(nèi)核

Trident （MSHTML） （三叉戟；三叉線；三齒魚叉）?
Gecko （壁虎）?
Presto （ 迅速的）
Webkit （Safari內(nèi)核,Chrome內(nèi)核原型,它是蘋果公司自己的內(nèi)核，也是蘋果的Safari瀏覽器使用的內(nèi)核）
Blink (由Google和Opera Software開發(fā)的瀏覽器排版引擎)

b、五大瀏覽器內(nèi)核代表作品
*Trident:IE、Maxthon(遨游)、騰訊 、Theworld世界之窗、360瀏覽器

代表作品IE,因為IE捆綁在Windows中，所以占有極高的市場份額，又稱IE內(nèi)核或是MSHTML，此內(nèi)核只能應(yīng)用于windows平臺，且是不開源的。

*Gecko：代表作品Mozilla Firefox 是開源的,它的最大優(yōu)勢是跨平臺，能在Microsoft Windows、Linux和MacOS X等主要操作系統(tǒng)上運行。

*Webkit?:代表作品Safari、Chrome ， 是一個開源項目。

*Presto?:代表作品Opera ，Presto是由Opera Software開發(fā)的瀏覽器排版引擎。它也是世界上公認的渲染速度最快的引擎。

*Blink ：由Google和Opera Software開發(fā)的瀏覽器排版引擎，2013年4月發(fā)布。

4、CSS Bug、CSS Hack和Filter

1)CSS Bug:CSS樣式在各瀏覽器中解析不一致的情況，或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS bug.
2)CSS Hack: CSS中，Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法，因為它們都屬于個人對CSS代碼的非官方的修改，或非官方的補丁。有些人更喜歡使用patch(補丁)來描述這種行為。
3)Filter:表示過濾器的意思，它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規(guī)則或聲明的方法。本質(zhì)上講，Filter是一種用來過濾不同瀏覽器的Hack類型。

*使用Hack帶來的一些副作用

降低了CSS代碼的可讀性，增加了代碼的負擔。

*設(shè)計CSS Hack和 Filter通常有兩種方法

1)一種是利用瀏覽器自身的Bug，來隱藏或顯示樣式或聲明；
2)另一種是利用瀏覽器對CSS支持的不完善，如對某些規(guī)則或語法還沒有形成支持，來隱藏或顯示樣式。

5、IE6常見CSS解析Bug及hack

1)圖片間隙

A)div中的圖片間隙(該bug出現(xiàn)在IE6及更低版本中)

描述：在div中插入圖片時，圖片會將div下方撐大三像素。

hack1:將</div>與<img>寫在一行上；

hack2:將<img>轉(zhuǎn)為塊狀元素，給<img>添加聲明：display:block;

B)dt,li中圖片間隙（IE6）

hack:將<img>轉(zhuǎn)為塊狀元素，給<img>添加聲明：display:block;

2) 雙倍浮向（雙倍邊距）

描述：當Ie6及更低版本瀏覽器在解析浮動元素時，會錯誤地把浮向邊邊界加倍顯示。

hack:給浮動元素添加聲明：display:inline;

3)默認高度（IE6）

描述：在IE6及以下版本中，部分塊元素擁有默認高度（低于16px高度）

hack1:給元素添加聲明：font-size:0;

hack2：給元素添加聲明：overflow:hidden;

4)表單元素行高不一致(IE,MOZ,C,O,S)

描述：表單元素行高對齊方式不一致

hack:給表單元素添加聲明：float:left;

?

5)按鈕元素默認大小不一 致

描述：各瀏覽器中按鈕元素大小不一致

hack1： 統(tǒng)一大小/（用a標記模擬）

hack2:input外邊套一個標簽，在這個標簽里寫按鈕的樣式，把input的邊框去掉。

hack3:如果這個按鈕是一個圖片，直接把圖片作為按鈕的背景圖即可。

6)瀏覽器解析按鈕邊框時，會把邊框解析在按鈕內(nèi)部，不會影響按鈕的原有大小

7)百分比bug

描述：在IE6及以下版本中在解析百分比時，會按四舍五入方式計算從而導致50%加50%大于100%的情況。

hack:給右面的浮動元素添加聲明：clear:right; 意思：清除右浮動。

clear:left:清除左浮動

clear:both:清除兩邊的浮動

7)鼠標指針bug

描述：cursor屬性的hand屬性值只有IE瀏覽器識別，其它瀏覽器不識別該聲明，cursor屬性的pointer屬性值IE6.0以上版本及其它內(nèi)核瀏覽器都識別該聲明。

hack:如統(tǒng)一某元素鼠標指針形狀為手型，應(yīng)添加聲明：cursor:pointer;

8)列表階梯BUG（IE6及更低版本的瀏覽器中）

bug1:在給的子元素中使用了Float:left;父元素中沒有設(shè)置浮動屬性，會出現(xiàn)垂直效果;

hack:給父元素設(shè)置浮動便能解決此問題

bug2:當給LI里的A轉(zhuǎn)成塊元素，并設(shè)置了固定高度時，且寫了浮動后在IE6及更低的版本瀏覽器里會出現(xiàn)LI階梯狀效果。
hack:給LI也同設(shè)置左浮動便可解決。

9)瀏覽器解析margin屬性值時，上下邊界的屬性值重合，左右相加。
10.在IE6及更低版本的瀏覽器里，如果想去掉input的默認邊框，需將其border屬性值設(shè)置成0方可兼容多個瀏覽器。

總結(jié)

以上是生活随笔為你收集整理的聊聊一直困扰前端程序员的浏览器兼容-【css】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。