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



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

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

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

狀況1:側邊欄會掉下去的主要原因就是寬度的設置,不管是你內文或是側邊欄放置的東西,只要有一點超出預設的寬度,側邊欄就會往下掉。所以你可以先查看看是否有什麼東西超過預設寬度囉。

狀況2:另外一種情形,可能是你在寫html的時候漏寫了某些標籤,像是應該成雙成對的<div>...</div>,你把他寫成<div>...<div>,或是少寫了</div>...等這些情況都會讓側邊欄出問題,嚴重一點版面會整個亂掉。

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

IE因為不符合w3c的規範,所以碰到的問題會比較多,但我也不是每種狀況都了解,所以有漏掉的部份,歡迎大家補完 :smile:
狀況1:第一重點還是寬度的問題,有時候你檢查發現沒超出寬度還是掉下去了? 那是因為IE在計算寬度的時候,會把「padding」以及「border」的屬性一起加進去。假設你寫了padding:0 5px; 就要自動把寬度扣掉10px。

狀況2:第二重點仍是寬度問題,假設你的頁面設1000px,內文以及側邊欄各給600px, 400px,此時IE側邊欄也會往下掉,那是因為IE不能把寬度算得太滿。所以我建議你給600px, 390px,這樣就可以解決了。

狀況3:有時候我們在側邊欄插入一段文字,IE不會幫我們自動換行,此時就會把版面撐大導致側邊欄掉下去,你可以加入word-wrap:break-word;overflow:hidden;讓文章自動換行

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

引用網址:

FACEBOOKs COMMENT():

EVERYBODYs COMMENT:

  • 1
    Sinchen (LV.25) // 2009.04.29 20:08

    這真的很麻煩,有時候改一改都要擔心每個瀏覽器是不是都正常

  • 2
    香腸 (LV.51) // 2009.04.29 20:12

    這樣你可能會忙翻喔XD

  • 3
    小晶 (LV.56) // 2009.04.29 21:58

    我現在使用的應該不會掉下去:P
    不過我很討厭它掉下去就是了~~~哈哈

  • 4
    muki (LV.1145) // 2009.04.29 23:16

    @Sinchen
    是阿,所以換佈景一定要每個瀏覽器跑一遍

    @香腸
    咦,不是大家一起debug嗎XD

    @小晶
    你的我現在看正常XD!!
    我也討厭他掉下去~

  • 5
    拆組達人 (LV.54) // 2009.04.30 11:16

    嗯,我常常漏寫結束標籤,導致版面全亂或邊欄掉下去說
    每次都找半天><

  • 6
    Arno Ruan (LV.177) // 2009.05.01 12:39

    啊哈,說中了!
    漏掉標籤最常發生在諾身上。XD

  • 7
    muki (LV.1145) // 2009.05.01 23:20

    @拆組達人 ,@Arno Ruan
    哈哈,漏掉標籤真的很容易犯錯呢
    尤其是全部都自己寫的時候,常常忘了關閉 :mrgreen:

  • 8
    Estonia (LV.1) // 2009.07.18 15:11

    "word-wrap:break-word;overflow:hidden;"
    我好感動哦...
    找了兩天
    終於解決IE6邊欄掉下去的問題了 :cry:
    謝謝你 :oops:

  • 9
    muki (LV.1145) // 2009.09.10 11:17

    @Estonia
    很高興有幫到你(不過我好像回覆的太晚了XD

  • 10
    小丑▓鱼♂ (LV.4) // 2009.09.10 14:43

    @ muki
    我个人觉得Muki你今天应该收到祝福的,在网路上写了那么多教程,算是一位小老师了,嘿嘿,教师节快乐,小老师!

  • 11
    muki (LV.1145) // 2009.09.10 15:33

    @ 小丑▓魚♂
    哈哈 好令我感動唷,謝謝你 :)

  • 12
    Amon (LV.2) // 2010.02.13 20:27

    不好意思可以幫我看一下~
    我這唯獨用IE看就會編欄往下掉
    點進去看文章就不會 ..

  • 13
    Amon (LV.2) // 2010.02.13 22:55

    已經自己DEBUG完成!
    呵呵~註解語打多打一個"!"造成 整個往下拉

  • 14
    muki (LV.1145) // 2010.02.14 14:10

    @ Amon
    哈哈
    看來這也是很多人會犯的錯誤:P


  • LEAVE YOUR COMMENT:




      :wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:


     
    字體大小: 小字型 12px大字型 15px
    ▲ back to top