html頁面內容超出后顯示水平滾動條的問題


這個問題已經遇到好幾次,解決起來也熟練了很多。
 
出現這種問題一般都是html或頁面中的某一內部元素寬度超了。
下面總結我遇到的幾種情況:
1、某一內部元素width設為100%,然而它還有border的寬度,border的寬度不包含在width中,所以結果超了。
2、span行內元素,由於它是行內元素,不設display:block之類,寬度設定對它沒用,當初弄的時候沒有意識到這個問題,結果在谷歌瀏覽器沒出現問題,在IE中這個就暴露出來了,嚴重超出屏幕寬度,后來把span設為display:block;再設下它的寬度,問題就解決了。
PS:對設置width:100%的元素要注意它的border、margin、padding,小心超出屏幕范圍。
 
對於尋找超出屏幕范圍的內部元素,我一般先把頁面分為幾大板塊來排除目標(即刪掉某板塊,看剩余版塊是否導致出現水平滾動條,若還是出現,則證明該板塊正常,否則該板塊為我們尋找的目標板塊——“罪魁禍首”),再繼續在導致超出的版塊中繼續詢查,直到找到該內部元素為止。
這樣的方法挺笨的,希望大家分享自己的經驗,交流下怎樣能快速找到導致頁面內容超出的內部元素,O(∩_∩)O謝謝。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM