在wordpress模板制作過程中，有一些貌似復(fù)雜的問題，其實(shí)只要確定了問題出現(xiàn)的位置，大多數(shù)都可以自行解決。

1.使用Firebug進(jìn)行排查

1.1 簡要介紹與安裝方法

Firebug是Firefox的一款插件，提供了一整套web開發(fā)所必需的工具。從HTML的編寫，到CSS樣式表的美化調(diào)優(yōu)，以及…
所以我們首先要安裝Firefox瀏覽器。
安裝好瀏覽器后，選擇菜單欄上的“工具”菜單，點(diǎn)擊“附加組件”==>“獲取附加組件”
在輸入框中輸入“firebug”。等搜索結(jié)果出來后點(diǎn)擊Firbug鏈接進(jìn)入Firebug的下載安裝頁面。

1.2 使用方法

安裝完成后，在自己出錯(cuò)的位置上，點(diǎn)右鍵==>查看元素，就可以找到出錯(cuò)的樣式在什么地方。

2、邊框背景調(diào)試法

2.1 簡要介紹

如果頁面在IE下瀏覽異常，在FF瀏覽正常，就比較麻煩一點(diǎn)，這時(shí)候我們可以給元素設(shè)置顯眼的邊框或者背景，進(jìn)行調(diào)試。

2.2 使用方法

首先估計(jì)一下出錯(cuò)的位置在那，在它的標(biāo)簽上加style=”border:1px solid #000″，這樣就可以看到該模塊占了多少位置，是否在成長的范疇。

3、最大寬度最小寬度

3.1 簡要介紹

在模板制作過程中，經(jīng)常會(huì)出現(xiàn)側(cè)邊欄下沉的情況，通常都是content區(qū)域的寬度過多造成的，但并不絕對是。

3.2 解決方法

遇到這種情況，我們可以先將content的寬度給成100或更小并添加overflow:hidden屬性，隱藏掉超出部分。如果寬度改小后，下沉問題解決。就可以判斷問題就是出現(xiàn)在這個(gè)元素上。之后可以改小margin-left、改小寬度、隱藏超出寬度的圖片什么的，一點(diǎn)一點(diǎn)測試，調(diào)個(gè)完美版本的出來。（之前看到某同事，每次寬度減小10來測試，既然是測試，減小100不是更容易發(fā)現(xiàn)問題嗎？）

3、樣式排除法

有些復(fù)雜的頁面也許加載了 N 個(gè)外鏈 CSS 文件，那么逐個(gè)刪除 CSS 文件，找到 BUG 觸發(fā)的具體 CSS 文件，縮小鎖定的范圍。
對于剛才鎖定的問題 CSS 樣式文件，逐行刪除具體的樣式定義，定位到具體的觸發(fā)樣式定義，甚至是具體的觸發(fā)樣式屬性。

4、模塊確認(rèn)法

有時(shí)候我們也可以從頁面的 HTML 元素出發(fā)。刪除頁面中不同的 HTML 模塊，尋找到觸發(fā)問題的 HTML 模塊。

標(biāo)簽： 搜索 問題 選擇

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。