傑克! 真是太神奇了!

自己寫的網頁掛在別的網頁框架上的時候 (如部落格網站...), 或者是自己用的 CSS 設定的列表一長, 偶而會有樣式跑掉了的狀況發生, 但常常不是很容易找出到底是被哪一條 (或者是哪幾條) css rule 蓋掉.

下面是如何用最簡單的工具: browser 內建的除錯工具來找出問題所在: 不必特別設定什麼或安裝什麼外掛, 只要按 F12 就對了:

IE 11 按下 F12 之後, 跳出來的除錯畫面如下, 它可能併在和原本的頁面的下方, 你可以按下黑色 Menu Bar 右手邊倒數第二個的 取消釘選 (Ctrl+P) 把它和原始的 IE 頁面分離開來:

分離後的 IE 除錯畫面

要查看文件中各個 HTML 元素的樣式, 可以用除錯畫面中的 DOM 總管. IE 的 DOM 總管 相當的好用 (在 Menu Bar 第二項), 可以正向及反向對照查看文章的 HTML 元素結構及畫面的關係 (上圖二個紅色箭號所指). 這二個功能會自動在 "除錯畫面" 及 "原始 IE 畫面" 二者之間切換, 方便我們觀察它動態的變化, 建議你用 Full HD (或者以上)的螢幕或者用雙螢幕看會比較輕鬆容易一些.

最左手邊的是 選取元素 (Ctrl+B) 功能: 它的功能是經由畫面快速找到對應的元素在 HTML 原始檔中的位置. 點選它之後會自動切到 "原始 IE 畫面", 並且移動滑鼠時, 會自動使經過的 HTML 元素 "變色亮起", 請慢慢移動滑鼠, 當系統選擇到你想要的元素或者附近時, 停止移動滑鼠並進行點選 (單擊), 畫面會再切回除錯畫面, 並且游標會停在該元件的位置上.

再來是 開啟 DOM 元素醒目提示 (Ctrl+Shift+I) 功能: 它的功能剛好相反. 點選它之後, 經由游標在 HTML 原始檔中移動, 對應的文字/圖形會 "變色亮起", 讓我們可以看清楚對應元素在畫面中的位置及範圍. 再點選一次可以停止上述動作. 不過要注意的是: 原始 IE 畫面不會切換到最上面, 也不會自動捲動的, 所以找不到元素時要自己點選原始 IE 畫面, 並且上下左右捲動找一找.

• 而右手邊的部份可以切換到 "樣式子畫面" (子 Menu Bar 的 樣式 項目是藍色文字的. 它可能出現在下方, 可以自行依喜好設定) 以顯示目前選到的元素所套用的 style 設定和它是打哪兒來的 (哪一個檔案及行號).
• 有打勾的是有效的 style (套用後留下來的)
• 打刪除線的是被覆蓋掉的 style.

如此, style 效果為何會 '走鐘' 不是就一一現形了.

至於要如何才能修正呢? 請先了解 CSS Style 的優先權. 可以參考這一篇 HTML CSS(v1) Style 的優先次序 和...(還沒寫完)

IE11 其他的除錯功能以後有機會再談.

Update 2015/09/03

發現有些 style 並不會被列出來, 例如: 用 Javascript 程式修改的; 或者來自 user 的 CSS 設定; 或者是 browser 的預設值. 所以要切到 樣式 旁邊的 計算的樣式 去檢查是否有被其他 style 來源修改過, 但還是可能無法得知是被誰 (哪一個 stylesheet, 或 javascript) 覆蓋掉的