為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??

CSS Bug、CSS Hack和Filter學(xué)習(xí)筆記

1)CSS Bug:CSS樣式在各瀏覽器中解析不一致的情況，或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS?bug.

2)CSS Hack: CSS中，Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法，因?yàn)樗鼈兌紝儆趥€人對CSS代碼的非官方的修改，或非官方的補(bǔ)丁。有些人更喜歡使用patch(補(bǔ)丁)來描述這種行為。

3)Filter:表示過濾器的意思，它是一種對特定的瀏覽器或?yàn)g覽器組顯示或隱藏規(guī)則或聲明的方法。本質(zhì)上講，Filter是一種用來過濾不同瀏覽器的Hack類型。

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

降低了CSS代碼的可讀性，增加了代碼的負(fù)擔(dān)。

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

IE6常見CSS解析Bug及hack

1)圖片間隙

A)在元素中直接插入圖片時，圖片下方會產(chǎn)生約3像素的間隙(該bug出現(xiàn)在IE6及更低版本中)

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

hack2:將img設(shè)置vertical-align:top/middle/bottom;只要不為baseline

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

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

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

3)默認(rèn)高度（IE6）

描述：在IE6及以下版本中，部分塊元素?fù)碛心J(rèn)高度（低于16px高度）

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

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

4)百分比bug

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

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

5)表單元素高度及對齊方式不一致(IE,MOZ,C,O,S)

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

hack:給表單元素添加聲明：float:left;或vertical-align:top;

2)表單元素中按鈕的解析是按怪異盒模型解析的。

3）直接去掉表單控件的邊框時用border:0;border:none;不能兼容ie7以下瀏覽器。

*透明寫法

1.opacity:0~1;IE8以上的瀏覽器

2.filter:alpha(opacity=1~100); ????IE9及IE9以下的瀏覽器

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

bug1:在給的子元素中使用了Float:left;父元素中沒有設(shè)置浮動屬性，li階梯狀效果。

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

bug2:當(dāng)給LI里的A轉(zhuǎn)成塊元素，并設(shè)置了固定高度時，且給父元素寫了浮動后在IE6及更低的版本瀏覽器里會出現(xiàn)垂直顯示。

hack:給a也設(shè)置左浮動便可解決。

8)鼠標(biāo)指針bug

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

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

擴(kuò)展內(nèi)容：

鼠標(biāo)指針

cursor:crosshair(十字架)

pointer(手形)

move(移動)

e-resize(左右方向)

ne-resize（向右及向上移動）

nw-resize(向上及向左移動)

n-resize(向上移動)

se-resize(向下及向右)

sw-resize(向下及向左)

s-resize（向下移動）

w-resize（向左移動）

text(文本)

wait(等待狀態(tài))

help(幫助)

轉(zhuǎn)載于:https://my.oschina.net/530504/blog/3045447

總結(jié)

以上是生活随笔為你收集整理的好程序员web前端分享CSS Bug、CSS Hack和Filter学习笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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