解決「側邊欄掉下去」的問題

有時候換了一個版面,常常會發現部落格的側邊欄「噗通」地掉下去,這應該是許多 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; 讓文章自動換行

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

想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

guest
0 則留言
Inline Feedbacks
View all comments
粉絲團