css樣式設(shè)計(jì)時(shí)快速定位bug的幾個(gè)好方法
來(lái)源:csscss.org 更新時(shí)間:10/04/23 點(diǎn)擊:139 收藏到:
在DIV+CSS模板設(shè)計(jì)中,檢測(cè)查找CSS中的BUG無(wú)疑是一件痛苦的事情,下面一些經(jīng)驗(yàn)或許可以幫助你更快的找出CSS中的BUG并進(jìn)行修補(bǔ)!
1、檢查是否清除浮動(dòng)
其實(shí)有不少的 CSS BUG 問(wèn)題是因?yàn)闆](méi)有清除浮動(dòng)造成的。養(yǎng)成良好的清除浮動(dòng)的習(xí)慣是必要的,推薦使用 無(wú)額外 HTML 標(biāo)簽的清除浮動(dòng)的方法(盡量避免使用 overflow:hidden;zoom:1 的類(lèi)似方法來(lái)清除浮動(dòng),會(huì)有太多的限制性)。
2、檢查 IE 下是否觸發(fā) haslayout
很多的 IE 下復(fù)雜 CSS BUG 都與 IE 特有的 haslayout 息息相關(guān)。熟悉和理解 haslayout 對(duì)于處理復(fù)雜的 CSS BUG 會(huì)事半功倍。推薦閱讀 old9 翻譯的 《On having layout》(如果無(wú)法翻越穿越偉大的 GFW,可閱讀 藍(lán)色上的轉(zhuǎn)帖 )
快捷提示:如果觸發(fā)了 haslayout,IE 的調(diào)試工具 IE Developer Toolbar 中的屬性中將會(huì)顯示 haslayout 值為 -1。
3、邊框背景調(diào)試法
故名思議就是給元素設(shè)置顯眼的邊框或者背景(一般黑色或紅色),進(jìn)行調(diào)試。此方法是最常用的調(diào)試 CSS BUG 的方法之一,對(duì)于復(fù)雜 BUG 依舊適用。經(jīng)濟(jì)實(shí)惠還環(huán)保.
4、檢查頁(yè)面的標(biāo)簽是否閉合
不要小看這條,也許折騰了你兩天都沒(méi)有解決的 CSS BUG 問(wèn)題,卻僅僅源于這里。畢竟頁(yè)面的模板一般都是由開(kāi)發(fā)來(lái)嵌套的,而他們很容易犯此類(lèi)問(wèn)題。
快捷提示:可以用 Dreamweaver 打開(kāi)文件檢查,一般沒(méi)有閉合的標(biāo)簽,會(huì)黃色背景高亮。
5、樣式排除法
有些復(fù)雜的頁(yè)面也許加載了 N 個(gè)外鏈 CSS 文件,那么逐個(gè)刪除 CSS 文件,找到 BUG 觸發(fā)的具體 CSS 文件,縮小鎖定的范圍。
對(duì)于剛才鎖定的問(wèn)題 CSS 樣式文件,逐行刪除具體的樣式定義,定位到具體的觸發(fā)樣式定義,甚至是具體的觸發(fā)樣式屬性。
6、模塊確認(rèn)法
有時(shí)候我們也可以從頁(yè)面的 HTML 元素出發(fā)。刪除頁(yè)面中不同的 HTML 模塊,尋找到觸發(fā)問(wèn)題的 HTML 模塊。
希望上面的一些辦法能夠在div+css設(shè)計(jì)中幫助到你!
本文來(lái)自CSS在線:http://www.csscss.org/cssarticle/2010423856.shtml
聯(lián)系客服