WordPress 1.5之前，WordPress網(wǎng)站樣式普普通通，毫無特色，自WordPress引入新功能——主題后，網(wǎng)站樣式開始有了很大變化。用戶只要輕輕點(diǎn)擊幾下就可以立即為自己的網(wǎng)站換上新裝。再多點(diǎn)擊幾次，或者略微做些修改，網(wǎng)站樣式也可能立刻就被弄得一團(tuán)糟——這就是網(wǎng)頁設(shè)計(jì)的世界。
網(wǎng)頁樣式出錯(cuò)時(shí)，很多人首先會(huì)向WordPress論壇尋求幫助。雖然論壇上的志愿者會(huì)盡他們所能幫用戶解決問題，但用戶也可以根據(jù)下面介紹的方法自己先試著解決問題，或者至少對(duì)問題的起因有更好的了解。
進(jìn)入論壇前的必知事項(xiàng)
文章稍后列出了用戶進(jìn)論壇詢問布局和設(shè)計(jì)問題時(shí)需要注意的事情，以及解決問題的小技巧。
檢查HTML和CSS代碼
仔細(xì)而全面地檢查HTML和CSS代碼，確保所有引用都能匹配。
縮小問題代碼范圍
稍后我們會(huì)向大家介紹一些方法，幫助確認(rèn)可能引發(fā)問題的原因范圍，以此縮小問題代碼范圍。
常見CSS錯(cuò)誤
有些問題以前可能已經(jīng)有人報(bào)告過。下面也列出了一些最常見的CSS錯(cuò)誤，幫助大家揪出影響網(wǎng)站樣式的細(xì)節(jié)問題。
除害——注意瀏覽器BUG
我們會(huì)盡力幫助找出CSS出現(xiàn)問題的癥結(jié)所在，但很多問題都來自于瀏覽器BUG或者不同瀏覽器之間的矛盾，因此我們還會(huì)給出一些避免瀏覽器BUG的意見和建議。
本文的最終目的是幫用戶解決CSS文件內(nèi)的樣式設(shè)計(jì)問題，而不是HTML或PHP文件中的問題。了解具體情況請(qǐng)看WordPress主題的使用。
備份
為確保萬無一失，介紹解決問題的方法前，首先請(qǐng)大家備份數(shù)據(jù)庫。其次，備份需要修改的文件，如果中途出錯(cuò)，可以用備份文件還原。
即使不編輯WordPress文件，也可以“現(xiàn)場(chǎng)”測(cè)試CSS
如果方法掌握得當(dāng)，用 Jesse Ruderman的Edit Styles書簽工具或火狐的Edit CSS插件進(jìn)行即時(shí)CSS測(cè)試會(huì)方便、安全得多。修改文件后，就可以將新代碼復(fù)制到相應(yīng)的WordPress主題文件中了（當(dāng)然，記住要事先備份WordPress主題文件）。
火狐瀏覽器的Web Developer 插件也可以測(cè)試CSS。
進(jìn)入論壇前的必知事項(xiàng)
CSS和網(wǎng)頁設(shè)計(jì)新人可以先查看一些WordPress的CSS技巧、資料，掌握CSS基本知識(shí)，或許能從中得到一些問題的答案。新人至少需要了解CSS的基本概念、CSS對(duì)HTML或頁面結(jié)構(gòu)的影響，熟悉論壇上的提問方式，使自己的提問更加專業(yè)、言之有物。
還需要學(xué)習(xí)一些基本的CSS術(shù)語，方便與人交流。學(xué)習(xí)術(shù)語不僅僅是為了深入了解CSS，更重要的是在描述某個(gè)問題或事物時(shí)，能夠準(zhǔn)確給出相應(yīng)的專用名詞。
CSS（層疊樣式表）由成片的代碼組成，這些代碼決定網(wǎng)頁的外觀或網(wǎng)頁HTML代碼的樣式。在WordPress中，CSS樣式表通常被存放在當(dāng)前主題目錄下的style.css文件中。存儲(chǔ)網(wǎng)頁結(jié)構(gòu)的HTML代碼和CSS引用一般則在主題目錄下的index.php文件中。
PHP文件也在主題文件中，PHP文件中的代碼和引用可生成HTML頁面。PHP文件（而非HTML頁面），是用戶修改特定CSS選擇符標(biāo)簽的最后機(jī)會(huì)。了解具體情況請(qǐng)看WordPress主題的使用。
CSS選擇符（名稱）一般可分為三種引用類型：ID，類，以及HTML標(biāo)簽。
ID
ID是對(duì)網(wǎng)頁上某個(gè)特定獨(dú)有區(qū)域的引用。人們通常將HTML網(wǎng)頁上的ID看作是一個(gè)閉合的DIV（division）塊：
<div id="header">Title of the Page</div>
在樣式表（CSS）中，ID選擇符被引用為#header，效果如下：
#header { position: relative; margin:0; padding:0; height:100px; width: 100%; background: red; color: white;} 類
類是對(duì)網(wǎng)頁上任何需要特殊顯示的元素的引用。例如，如果需要高亮顯示文章中的一兩個(gè)單詞（假設(shè)使用紅色作為高亮色），就需要在樣式表中添加一個(gè)這樣的類選擇符：
.hilite { color: red} 而HTML中的引用則是：
...this is some text about something I want <span class="hilite">in red</span>. And some more rambling here...
根據(jù)上面的介紹能看出，樣式表中ID選擇符和類選擇符之間的差別在于，ID使用的是井號(hào)（#name），而類用的則是句號(hào)（.name）。在一個(gè)頁面上，ID引用必須是獨(dú)一無二的，只能使用一次。類引用則可以在同一頁面中重復(fù)使用。
HTML標(biāo)簽
如果希望“設(shè)計(jì)”一個(gè)特有的HTML標(biāo)簽引用，比如一個(gè)blockquote，網(wǎng)頁內(nèi)代碼可能是這樣的：
<blockquote>This is a pithy and brilliant quote that I knew you would enjoy.</blockquote>
樣式表中blockquote的引用沒有#標(biāo)記，也沒有句號(hào)標(biāo)記，只能簡(jiǎn)單列出HTML元素和設(shè)計(jì)元素。下面的例子將所引用的內(nèi)容進(jìn)行左右兩側(cè)縮進(jìn)顯示，在引用內(nèi)容的左側(cè)放入一個(gè)藍(lán)色線條，并且將字體設(shè)為斜體：
blockquote { position: relative; margin: 10px 50px 10px 50px; padding:5px; font-style:italic; border-left:solid blue 4px; } 我們可以在不同的設(shè)計(jì)元素上使用各種HTML標(biāo)簽，像是body, p, H1, H2, H3, ul, li等。
CSS中有更多關(guān)于修改ID、類以及HTML的內(nèi)容。
重要提示：有些主題會(huì)將css樣式放在不止一個(gè)文件中，Kubrick就是這些主題中的一員。如果在某個(gè)css文件中修改css屬性后，沒有得到想要的效果，可能就是主題在某個(gè)php文件（通常是頁頭文件）中放入了嵌套css，嵌套的css樣式文件改寫了導(dǎo)入的/鏈接到的css樣式表。
檢查HTML和CSS代碼
我們需要在源代碼中檢查網(wǎng)頁布局是否出錯(cuò)，源代碼就是頁面的“后臺(tái)”。
在頁面的“后臺(tái)”中，原先在互聯(lián)網(wǎng)窗口上看到的漂亮布局全部化作了成段的、夾雜著奇怪的外文引用的代碼。這和汽車引擎蓋下的情況有些類似，我們知道引擎蓋下的各種機(jī)械裝置聯(lián)合起來就能發(fā)動(dòng)汽車，但頁面后的這些代碼究竟是拿來做什么的呢？
查看HTML代碼
在web瀏覽器中打開頁面，在瀏覽器的“查看”頂級(jí)菜單中選擇“頁面源代碼”。之后會(huì)彈出另一個(gè)瀏覽器窗口或記事本（操作系統(tǒng)自帶的一個(gè)小程序），或者其它類似程序，其中的內(nèi)容就是組成頁面的HTML文檔。
查看CSS代碼
要查看CSS代碼，可以使用CSS實(shí)際地址，也可以在HTML文檔中查找以下內(nèi)容：
<link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">
這個(gè)鏈接就是裝載附加CSS樣式表的鏈接。要查看CSS，可以雙擊文件名，或在瀏覽器中輸入文件的詳細(xì)鏈接：
http://www.yoursite.com/wordpress/wp-content/themes/default/style.css
在WordPress中，PHP被用來生成HTML頁面。PHP代碼不僅復(fù)雜，也容易讓人迷惑?？梢栽谝焉傻捻撁妫ㄈ缛罩緲永┲胁榭碒TML代碼。如果想修改HTML結(jié)構(gòu)和CSS引用，需要先修改相應(yīng)的PHP文件。WordPress主題的使用中介紹了怎樣查看主題模板并找出與當(dāng)前頁面相匹配的模板。
下文中的解決方法主要是利用CSS來改變頁面布局。要了解如何修改主題，請(qǐng)參考主題開發(fā)。
查看CSS代碼
打開HTML和CSS的后臺(tái)之后，我們就要開始像夏洛克·福爾摩斯一樣做偵察了。首先，要明白自己需要查找的信息，以及在什么位置上能找到解決問題的基本元素。
HTML頁面中包括所有結(jié)構(gòu)代碼，這些代碼豎起了頁面的網(wǎng)格框架?？梢园袶TML頁面看作是一個(gè)到處標(biāo)有注釋的地圖，這里的注釋就是CSS文件中所找到的說明的指示器。
在文檔中掠過一長(zhǎng)串<link rel='archives'... 之類的內(nèi)容，直到看到<body>標(biāo)簽。<body>下是頁面布局的主體部分，<body>之后的每段代碼對(duì)頁面的結(jié)構(gòu)和布局都相當(dāng)重要。
繼續(xù)滑動(dòng)鼠標(biāo)，在文檔中查找識(shí)別ID和CLASS（類）語句。假設(shè)我們找到的是以下內(nèi)容：
<div id="page"> <div id="header"> <h1>My WordPress Site</h1> <div id="headerimg"> </div> <div class="description">by Me and Only Me</div> </div> <div id="content" class="widecolumn"> <div class="post">
以上代碼看起來可能讓人有些難以理解，但可以幫我們區(qū)分文章內(nèi)容的各個(gè)版塊。
代碼以一個(gè)名為“page”的DIV標(biāo)簽開始，設(shè)定了整個(gè)頁面的外觀。在CSS文件中查找#page，可以看到與頁面樣式相關(guān)的外觀樣式表。“page”之后是header DIV，header規(guī)定了網(wǎng)站名稱的標(biāo)題字體（H1），這一特別樣式來源于Kubrick主題，該主題的頁頭部分含有一個(gè)由headerimg DIV設(shè)定的圖片。header之后是一個(gè)名為“description”的CLASS引用的DIV標(biāo)簽，description是對(duì)網(wǎng)站的簡(jiǎn)單描述。在CSS文件的.description部分能找到description區(qū)域的樣式表。
接下來的兩個(gè)標(biāo)簽(</div>) 關(guān)閉了header標(biāo)簽。在這之后是“content”的DIV ID，同時(shí)還有一個(gè)名為"widecolumn"的類，"widecolumn"之后是另一個(gè)post類。 "content"和"widecolumn"設(shè)定了包圍日志的容器的整體樣式。
這是一個(gè)父子關(guān)系的實(shí)例。在接下來的部分中我們會(huì)發(fā)現(xiàn)，這里正是CSS樣式問題的主要發(fā)源地之一。
網(wǎng)頁設(shè)計(jì)的最大難題之一就是弄清問題產(chǎn)生的位置以及問題所受影響。這被稱作CSS的“父子關(guān)系”。眾所周知，父母做事時(shí)總會(huì)從內(nèi)心為孩子考慮，為孩子做最好的打算，但孩子卻往往會(huì)感到恐懼，最后造成父子間的緊張關(guān)系。了解這一點(diǎn)對(duì)解決問題會(huì)產(chǎn)生一定幫助。
曾經(jīng)有一個(gè)WordPress用戶在論壇上抱怨說，她希望自己頁面上的header部分的寬度能與頁面寬度相同，正文部分在頁面居中顯示，頁面左右各留出大片空白，但她在header版塊的空白部分上試驗(yàn)了很久，也沒有找出解決辦法，于是到論壇上尋求幫助。
<div id="page"> <div id="header">Header Title</div> <div id="content"> <div class="post">Post babble here...</div>
這里空白部分的CSS屬性是：
#page { margin-top:5px; margin-right: 100px; margin-bottom: 5px; margin-left:100px; } #header { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px;} #content { margin-top:5px; margin-right: 20px; margin-bottom: 5px; margin-left:20px; } .post { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px; } 從這位用戶的代碼中可以判斷出，更改header的空白部分不起作用的原因在于，空白部分首先受到了page空白部分的影響。這就是CSS父子關(guān)系造成的影響。引發(fā)問題的“父親”page指示“孩子”header進(jìn)行某個(gè)操作，而header希望達(dá)到的卻是另一種效果。
如果更改page左右兩側(cè)空白，header的空白問題也就解決了。但新的問題又出現(xiàn)了。page繼續(xù)發(fā)揮自己的影響，content部分的寬度也達(dá)到了頁面寬度。這時(shí)又需要更改content左右兩側(cè)的空白，恢復(fù)原有寬度。要是頁面上所有元素都和諧共處，新的空白部分可以是：
#page { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px; } #header { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px;} #content { margin-top:5px; margin-right: 100px; margin-bottom: 5px; margin-left:100px; } .post { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px; } 縮小問題代碼范圍
意識(shí)到父子關(guān)系對(duì)網(wǎng)頁的影響之后，很多問題就可以解決了。但有時(shí)這些關(guān)系是那么地復(fù)雜，很難斷定究竟是哪個(gè)部分出了問題，又是哪一部分影響到了哪一部分。
下面有些招數(shù)可以更快地逐步縮小并最終確定出問題的CSS版塊、區(qū)塊以及class類。首先要備份CSS文件在內(nèi)的所有主要文件，確保出錯(cuò)后可以用備份恢復(fù)原狀。
確定問題根源并糾正后，刪除中途用以測(cè)試的內(nèi)容，使網(wǎng)頁恢復(fù)“正常”狀態(tài)。
圈出各個(gè)版塊
認(rèn)識(shí)HTML頁面的各個(gè)區(qū)域或塊后，打開CSS文件，為所有的DIV塊加入以下屬性：
border:solid 1px color
在每個(gè)區(qū)塊中單詞color的后面加上另一種顏色的名稱。
例如：
#page { margin:5px; padding:0; border: solid 1px red; } #header { margin: 10px; padding: 5px; border: solid 1px blue; } #content { margin:5px 100px 5px100px; padding:10px; border: solid 1px green; } .post { margin:5px; padding:10px; border: solid 1px yellow; } 保存CSS文件，在web瀏覽器中查看頁面（點(diǎn)擊刷新或F5）?，F(xiàn)在可以看到不同區(qū)塊外會(huì)有不同顏色的方框圍繞。
如果文本沒有被有色方框圍繞，檢查之前所更改的選擇符是否拼寫正確，是否能被HTML識(shí)別。
如果問題出現(xiàn)在藍(lán)色方框中，就可以從藍(lán)色方框中著手解決問題。記住在問題解決后刪除測(cè)試屬性。
在火狐瀏覽器中有一個(gè)插件可以按照以上方法圈出各個(gè)版塊，極大地簡(jiǎn)化了解決問題的過程。這個(gè)插件叫做 Aardvark，可以在http://www.karmatics.com/aardvark/上免費(fèi)下載，網(wǎng)站上還有一個(gè)試驗(yàn)演示。
高亮顯示各版塊
除了用文本框框出不同版塊以分辨CSS/HTML問題源頭外，還可以通過改變文本顏色來突出顯示問題所在區(qū)域。注意：在測(cè)試過程中記住原有顏色，以便完成測(cè)試后恢復(fù)原狀。記住備份！
可以在CSS文件中某個(gè)選擇符的屬性中加入color:red（也可以是其它顏色）字樣，更改該版塊的字體顏色：
H1 { font-style:bold; font-size: 125%; color: red; } 鮮艷的紅色H1標(biāo)題會(huì)立刻吸引住我們。
要更改某個(gè)版塊的背景色，可以加入background:pink，使整個(gè)背景顏色都變成粉色。
#header { margin:5px; padding: 10px; background:pink; } 效果圖：
現(xiàn)在整個(gè)header區(qū)塊的背景色都是粉色的了。查找到錯(cuò)誤并修正后，刪除對(duì)背景色的設(shè)置，讓網(wǎng)頁恢復(fù)原狀。
驗(yàn)證代碼
即使非常小的細(xì)節(jié)性錯(cuò)誤都有可能摧毀頁面布局。一個(gè)拼寫錯(cuò)誤的標(biāo)簽（將href拼寫成rhef），一個(gè)忘記閉合的標(biāo)簽，一個(gè)被忽略的屬性，甚至只是個(gè)錯(cuò)誤的屬性都可能使頁面癱瘓。
我們?yōu)g覽代碼時(shí)，很容易忽略代碼中的小問題，而免費(fèi)的在線驗(yàn)證程序可以幫我們檢查出HTML、XML以及CSS代碼中的細(xì)微錯(cuò)誤。大多數(shù)在線驗(yàn)證程序都需要我們輸入網(wǎng)站的URI（鏈接）以初始化驗(yàn)證過程，有的甚至需要我們復(fù)制代碼或上傳文件才能開始驗(yàn)證。默認(rèn)情況下，WordPress會(huì)驗(yàn)證自己的代碼，而一旦用戶更改了代碼，WordPress就不再驗(yàn)證，因此即使最小的代碼錯(cuò)誤也可能引發(fā)混亂局面。
不同的驗(yàn)證程序檢查不同問題，如果不能在某個(gè)驗(yàn)證程序中找出解決方法，可以嘗試另一種驗(yàn)證程序。很多驗(yàn)證程序建議用戶進(jìn)行這樣或那樣的修改，但修改前請(qǐng)找出問題所在。
WordPress手冊(cè)文檔中的驗(yàn)證網(wǎng)站提供了很多驗(yàn)證網(wǎng)站和在線驗(yàn)證程序的資料，幫助大家了解更多網(wǎng)站驗(yàn)證方面的信息。
火耕法——最后的方法
膽小勿入
注意：火耕法有兩種形式，如果覺得第一種過于冒險(xiǎn)，可以選擇第二種。
進(jìn)行以上操作后如果仍然不能確定問題范圍，這里還有一種方法，這種方法有時(shí)會(huì)被叫做“火耕法”，可以幫助縮小問題范圍。火耕法需要不被打擾的環(huán)境、完全的注意力以及方便出錯(cuò)后還原頁面布局的完整備份。最好熟悉HTML和CSS。
1. 備份所有文件
2. 在瀏覽器中打開某篇日志，點(diǎn)擊“查看”——“頁面源代碼”
3. 將源代碼文件命名為junk.html，以文本文檔形式保存在硬盤中的空白測(cè)試文件夾中。不要關(guān)閉文件，在整個(gè)測(cè)試過程中保持文件的打開狀態(tài)。
4. 將CSS文件復(fù)制到同一測(cè)試文件夾下
5. 如果圖片出錯(cuò)，將圖片文件夾或圖片復(fù)制到測(cè)試文件夾中
6. 將junk.html源文件中的樣式表引用：
<link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">
改為：
<link rel="style sheet" type="text/css" href="style.css">
保存junk.html文本文件（但不要關(guān)閉文件）。
7. 在測(cè)試文件夾中雙擊junk.html，在瀏覽器中檢查文件內(nèi)容。這時(shí)可以看到帶有相應(yīng)圖片的正常頁面樣式。如果圖片仍然不合適，雙擊鏈接引用進(jìn)入樣式表。
8. 在junk.html文本文件中找到問題開始的地方，轉(zhuǎn)移到該版塊的上一部分（一個(gè)包括開始標(biāo)簽和結(jié)束標(biāo)簽的版塊），如：
<p>babble...</p>
或
<div class="post">babble...</div>
高亮顯示從開始標(biāo)簽到結(jié)束標(biāo)簽的整個(gè)版塊內(nèi)容，剪切這部分內(nèi)容（Ctrl+X）.
9. 保存文件
10. 在瀏覽器中刷新網(wǎng)頁（F5或點(diǎn)擊刷新——如果沒有發(fā)現(xiàn)什么變化，按住SHIFT鍵，然后再按下F5鍵，如果在火狐瀏覽器中則可以同時(shí)按下Ctrl+Shift+R）.
11. 這時(shí)應(yīng)該看到頁面上被剪切的內(nèi)容已經(jīng)不見了。繼續(xù)檢查頁面，看問題是否已經(jīng)被修正，如果是，那么被剪切的這部分內(nèi)容就是問題所在了。如果問題仍然存在，前往下一步。
12. 如果問題仍然存在，返回junk.html文件，將光標(biāo)放回被剪切內(nèi)容的位置上。將被剪切內(nèi)容復(fù)制回文件中（ctrl+V）。之后將光標(biāo)移到附近位置，重復(fù)第8至第12步。
問題可能會(huì)在整個(gè)過程中的某一步驟得到糾正或自動(dòng)消失。查找問題時(shí)先從較大的區(qū)域開始，確定問題出現(xiàn)在某個(gè)區(qū)域后，再將該區(qū)域劃分為小塊，最終找出問題所在。標(biāo)注CSS引用以識(shí)別問題所在位置，以便于在CSS文件中修正錯(cuò)誤。
相對(duì)溫和的方法
火耕法有個(gè)相對(duì)溫和的版本——相較于之前介紹的“剪切”代碼的問題部分，這里可以將問題部分剪切并復(fù)制到記事本或其它文本編輯器中，確保不會(huì)因?yàn)橛脩糁型痉稚穸鴣G失所剪切的內(nèi)容。隨時(shí)記住備份，避免意外情況發(fā)生（意外情況發(fā)生的頻率遠(yuǎn)高于你的想象?。?/p>
常見CSS錯(cuò)誤
人總是會(huì)犯錯(cuò)誤的。"typo"（打字錯(cuò)誤）這個(gè)詞的出現(xiàn)也是事出有因。下面是一些最常見的CSS錯(cuò)誤。
代碼拼寫錯(cuò)誤
眾所周知，leftt與left自然是不同的，這可能就是原來應(yīng)該出現(xiàn)在頁面左側(cè)的元素出現(xiàn)在頁面右側(cè)的原因。將頁面的頁邊距設(shè)為30ps并不影響頁面實(shí)際效果，但30px卻會(huì)對(duì)頁面效果造成很大影響。拼寫錯(cuò)誤相當(dāng)常見，也很容易被忽略。幸好CSS驗(yàn)證程序能幫我們找出這些細(xì)微的錯(cuò)誤。
被忽略的細(xì)節(jié)
CSS具有極強(qiáng)的創(chuàng)造性，但也有些必須遵守的基本規(guī)定。除了HTML標(biāo)簽，每個(gè)選擇符（selector）都需要被標(biāo)注為ID或CLASS，并以selector形式展開（property: value; property: value;），括號(hào)、冒號(hào)、分號(hào)一個(gè)都不能少。忽略任何一個(gè)細(xì)節(jié)頁面布局都不會(huì)發(fā)生變化，或者會(huì)發(fā)生不良變化。CSS驗(yàn)證程序也能幫我們找出這些細(xì)微的錯(cuò)誤。
錯(cuò)誤的選擇符
將本應(yīng)放在#content-text中的設(shè)計(jì)創(chuàng)意放在了#content中，這對(duì)頁面布局不會(huì)有任何幫助。幸好查看頁面時(shí)會(huì)立即發(fā)現(xiàn)這類錯(cuò)誤，只要將內(nèi)容剪切并復(fù)制到正確的位置就可以解決問題....記住自己在#content中刪除的內(nèi)容。當(dāng)然，可以在備份文件中找回丟失的代碼。切記！
不恰當(dāng)?shù)哪０迥K
WordPress的模塊化模板非常實(shí)用，但很多時(shí)候用戶應(yīng)該在comments-popup.php或類似名稱的文件中做改動(dòng)時(shí)，會(huì)誤在comments.php中做了修改。每次需要修改文件內(nèi)容時(shí)，請(qǐng)雙擊相應(yīng)的模塊版塊。如果無意間出錯(cuò)，可以用備份資料還原。
多項(xiàng)選擇
CSS不可能看到我們?cè)谙胧裁矗绻粋€(gè)選擇符有兩個(gè)相互矛盾的引用，選擇符需要在其中進(jìn)行選擇。在新樣式表后引入自己原創(chuàng)的樣式表，上述問題就會(huì)經(jīng)常出現(xiàn)。假設(shè)你在查找h1標(biāo)題選擇符的錯(cuò)誤，但沒有成果，可以在樣式表中搜索該選擇符是否有另一個(gè)引用。
除害——注意瀏覽器BUG
無論我們?cè)鯓咏g盡腦汁地美化網(wǎng)頁，在另一個(gè)瀏覽器中查看我們的頁面時(shí)，都有可能看到被扭曲的頁面版式。
不同瀏覽器有不同的頁面解析方式。舊式瀏覽器無法識(shí)別新的CSS標(biāo)準(zhǔn)，而新式瀏覽器之間也沒有達(dá)成統(tǒng)一的“查看”頁面方式。于是瀏覽器的網(wǎng)頁顯示效果總是不盡如人意，設(shè)計(jì)元素或過度閃爍，或不斷跳動(dòng)，或丟失，頁面版塊被移動(dòng)，布局扭曲。
那么要怎樣才能判斷出是瀏覽器而不是設(shè)計(jì)導(dǎo)致的原因呢？很多人可能根本無從分辨，但如果精通CSS，就能辨別瀏覽器出錯(cuò)的各種癥狀。下面是一些簡(jiǎn)單的提示：
- 鼠標(biāo)在頁面上滾動(dòng)時(shí)，文字跳動(dòng)或閃爍
- 將鼠標(biāo)移到某個(gè)鏈接上時(shí)，鏈接和文字都會(huì)跳動(dòng)
- 將鼠標(biāo)移到鏈接列表上時(shí)，整個(gè)列表都會(huì)跳動(dòng)
- 頁面樣式異常。文本框或變寬，或變窄
- 圖片覆蓋文字或列表
- 過濾器等特殊效果異?；驘o法顯示
想了解瀏覽器BUG的更多信息，請(qǐng)參閱CSS之修復(fù)瀏覽器漏洞。
