分析CSSBug、CSSHack和Filter

本篇內(nèi)容主要講解“分析CSS Bug、CSS Hack和Filter”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“分析CSS Bug、CSS Hack和Filter”吧!

宜春網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,宜春網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為宜春上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的宜春做網(wǎng)站的公司定做！

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

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

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

*使用Hack帶來(lái)的一些副作用

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

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

IE6常見(jiàn)CSS解析Bug及hack

1)圖片間隙

A)在元素中直接插入圖片時(shí)，圖片下方會(huì)產(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及更低版本瀏覽器在解析浮動(dòng)元素時(shí)，會(huì)錯(cuò)誤地把浮向邊邊界加倍顯示。

hack:給浮動(dòng)元素添加聲明：display:inline;

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

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

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

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

4)百分比bug

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

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

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

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

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

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

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

*透明寫法

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

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

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

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

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

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

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

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

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

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

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

鼠標(biāo)指針

cursor:crosshair(十字架)

pointer(手形)

move(移動(dòng))

e-resize(左右方向)

ne-resize（向右及向上移動(dòng)）

nw-resize(向上及向左移動(dòng))

n-resize(向上移動(dòng))

se-resize(向下及向右)

sw-resize(向下及向左)

s-resize（向下移動(dòng)）

w-resize（向左移動(dòng)）

text(文本)

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

help(幫助)

到此，相信大家對(duì)“分析CSS Bug、CSS Hack和Filter”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)頁(yè)標(biāo)題：分析CSSBug、CSSHack和Filter
文章轉(zhuǎn)載：http://bm7419.com/article2/igsiic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)