有時候換了一個版面，常常會發現部落格的側邊欄「噗通」地掉下去，這應該是許多 blogger 都會碰到的問題。甚至有時候在火狐及其他瀏覽器觀看正常，偏偏到 IE 就掛點，此種情況應該會讓每個人恨得牙癢癢的吧。

如果你碰到了這些問題，先別急著求助別人，建議使用以下方式測試看看，也許你自己也可以修復「側邊欄掉下去」的問題唷

用每個瀏覽器看，側邊欄都掉下去了

請參考以下狀況排除～

• 狀況1：側邊欄會掉下去的主要原因就是寬度的設置，不管是你內文或是側邊欄放置的東西，只要有一點超出預設的寬度，側邊欄就會往下掉。所以你可以先查看看是否有什麼東西超過預設寬度囉。
• 狀況2：另外一種情形，可能是你在寫 html 的時候漏寫了某些標籤，像是應該成雙成對的 … ，你把他寫成 ...   ，或是少寫了 …等這些情況都會讓側邊欄出問題，嚴重一點版面會整個亂掉。

用 IE 瀏覽器看，側邊欄掉下去了

IE 因為不符合 w3c 的規範，所以碰到的問題會比較多，但我也不是每種狀況都了解，所以有漏掉的部份，歡迎大家補完

• 狀況1：第一重點還是寬度的問題，有時候你檢查發現沒超出寬度還是掉下去了? 那是因為 IE 在計算寬度的時候，會把「padding」以及「border」的屬性一起加進去。假設你寫了padding:0 5px;，就要自動把寬度扣掉 10px。
• 狀況2：第二重點仍是寬度問題，假設你的頁面設 1000px ，內文以及側邊欄各給 600px, 400px，此時 IE 側邊欄也會往下掉，那是因為 IE 不能把寬度算得太滿。所以我建議你給 600px, 390px，這樣就可以解決了。
• 狀況3：有時候我們在側邊欄插入一段文字， IE 不會幫我們自動換行，此時就會把版面撐大導致側邊欄掉下去，你可以加入 word-wrap:break-word;overflow:hidden; 讓文章自動換行

以上是我所想到的五種狀況，假設這些方法你都嘗試過了，卻仍然無法解決側邊欄的問題，不妨在底下留言告知，讓大家一起幫忙:)

更多 CSS 相關文章

難解的 CSS 排版：認識對齊(下)

2019-09-05

難解的 CSS 排版：認識對齊(下)

HTML/CSS

難解的 CSS 排版：認識對齊(上)

2019-09-04

難解的 CSS 排版：認識對齊(上)

HTML/CSS

CSS Grid 語法筆記

2017-10-16

CSS Grid 語法筆記

HTML/CSS

Bootstrap 4 的 Grid 應用介紹

2017-08-14

Bootstrap 4 的 Grid 應用介紹

HTML/CSS

傾囊相授 ! MUKI 的 RWD 入門與實戰課程分享

2017-05-08

傾囊相授 ! MUKI 的 RWD 入門與實戰課程分享

HTML/CSS

CSS Flexbox 介紹與解析

2016-06-27

CSS Flexbox 介紹與解析

HTML/CSS