html頁面內容超出后顯示水平滾動條的問題_html/css_WEB-ITnose

出現這種問題一般都是html或頁面中的某一內部元素寬度超了。

下面總結我遇到的幾種情況：

1、某一內部元素width設為100%，然而它還有border的寬度，border的寬度不包含在width中，所以結果超了。

2、span行內元素，由于它是行內元素，不設display:block之類，寬度設定對它沒用，當初弄的時候沒有意識到這個問題，結果在谷歌瀏覽器沒出現問題，在IE中這個就暴露出來了，嚴重超出屏幕寬度，后來把span設為display:block；再設下它的寬度，問題就解決了。

PS:對設置width：100%的元素要注意它的border、margin、padding，小心超出屏幕范圍。

對于尋找超出屏幕范圍的內部元素，我一般先把頁面分為幾大板塊來排除目標（即刪掉某板塊，看剩余版塊是否導致出現水平滾動條，若還是出現，則證明該板塊正常，否則該板塊為我們尋找的目標板塊——“罪魁禍首”），再繼續在導致超出的版塊中繼續詢查，直到找到該內部元素為止。

這樣的方法挺笨的，希望大家分享自己的經驗，交流下怎樣能快速找到導致頁面內容超出的內部元素，O(∩_∩)O謝謝。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com