在這個頁面：用於梳理CSS的方法/工具來查找哪個樣式被什麼規則覆蓋？
http://www.palosverdes.com/sandbox/9slategrey/index.cfm
我試圖把在一個新的菜單（在「城市的蘭喬帕洛斯第斯」的一個在頂部）。該菜單似乎與頁面上的其他元素共享大量容器名稱。到目前爲止，其他元素已經和諧共存，但這個菜單正在被他們蹂躪。
這個問題是由事實錯綜複雜，事情出錯菜單是不同的，這取決於你正在查看它的瀏覽器。
我應該用什麼方法/工具來區分哪些樣式來自哪裏，以及如何最好地解決任何樣式衝突？爲什麼瀏覽器中菜單的問題會有所不同？
我建議你從使用Firebug和Developer Tools等「簡單」工具開始，看看每個元素的風格在哪裏。
右鍵單擊要查看樣式的元素，選擇「Inspect with Firebug」並在右側窗格中查看「樣式」選項卡下的元素的應用和覆蓋樣式以及它們來自哪一行。
Google Chrome的檢測元素（右鍵單擊 - >檢查元素）將顯示匹配的CSS規則和每個元素的計算樣式。我發現它對找出哪個規則導致什麼效果非常有用。
/工具，我應該使用什麼方法來挑開哪些樣式
對於Firefox，還有螢火蟲插件。對於Chrome和IE打F12或CTRL + SHIFT +我爲內置的調試器。對於Opera來說，有內置的Dragonfly（我忘記了熱鍵）。 Safari ..我不知道。 @prodigitalson表示它與Chrome相同。
其樣式來自何處
應該在調試器被應用到的元素以及所計算的（合併）樣式的樣式的擊穿和被否決這些樣式。
如何最好地解決任何樣式衝突？
在CSS中，我們稱之爲「specificity」。儘管你可能認爲風格定義從上到下級聯（推翻）其他風格，但再想一想。嘗試確定哪些樣式統治其他樣式並將其清除。
爲什麼瀏覽器中菜單的問題會不同？
err ..瀏覽器不一致？ IE有一個很奇怪的盒子模型（特別是在舊版本中）。嘗試在第一個代碼中添加像<!DOCTYPE html>這樣的文檔類型以實施嚴格模式。這不會節省你的IE框模型的問題，但至少你節省自己從「Quirks Mode」
Safar非常像Chrome - 與webkit devtools相同。 – prodigitalson 2012-03-27 00:23:33
我向第一個回答者問了這個問題，想想我也會問你： 我在選擇元素之後選擇了一個元素：懸停樣式已應用於它。在這種情況下，當懸停在菜單項上時，它會變成灰色，然後應該變回白色。相反，它保持灰色。我似乎無法凍結菜單中檢查該狀態下的元素的位置，並查看導致菜單項保持灰色狀態的應用程序。有沒有辦法凍結懸停狀態來檢查元素？ – 2012-03-27 18:03:24
在chrome dev工具中，在元素選項卡下的樣式手風琴中，有一個圖標看起來像「虛線矩形上的箭頭」。這是「切換元素狀態」。點擊你想要徘徊的元素，然後點擊該圖標，它應該爲你提供4個狀態，其中一個是懸停的。它應該保持「徘徊」，只要該框被選中。 – Joseph 2012-03-27 20:43:49
事實證明，雖然看着螢火蟲的風格，我沒有留意錯誤安慰。當我看着屏幕的頂部時，我注意到每次我在菜單項上徘徊時，錯誤計數都在遞增。
有一個像end.fx這樣的錯誤是未定義的，它發生在javascript文件中，因爲我將動畫的起始顏色定義爲「透明」，而js文件理解時，它拋出一個錯誤當它試圖計算從「透明」到最終rgb值的動畫。
謝謝，這非常有用。在使用某些元素後，我無法選擇元素：懸停樣式已應用於此元素。在這種情況下，當懸停在菜單項上時，它會變成灰色，然後應該變回白色。相反，它保持灰色。我似乎無法凍結菜單中檢查該狀態下的元素的位置，並查看導致菜單項保持灰色狀態的應用程序。 有沒有辦法凍結懸停狀態來檢查元素？ – 2012-03-27 18:02:29