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