首頁 > web前端 > css教學 > 主體

Firefox下樣式設定寬度奇怪現象_經驗交流

WBOY
發布: 2016-05-16 12:04:36
原創
1301 人瀏覽過

頁面中有一個資料列表,是table,放在一個div視窗中,結構如下:

複製程式碼 程式碼如下:



....清單資料....





給container 設定了樣式#container {width:100%; margin:10px;}
給grid 設定了樣式#grid {width:100%}

測試結果在IE中正常,在Firefox 下container 的實際寬度會超過100%而出現橫向滾動條,因為Firefox把margin算進了寬度,實際等於100% 20px>100%。
當然可以去掉div的margin定義,改用body的padding來設置,但頁面中有其他內容要佔滿整個頁。
於是以前為了解決這個問題會給div在Firefox區別定義一個width:98%,這樣好像是解決了問題,但是如果瀏覽器窗口變小,Firefox下的98% 20px說不定就又大於100%而出現橫向捲軸。

出於試試看的心理,我把container的樣式改成了#container {width:100%-20; margin:10px},再到Firefox下去看看,呵呵,竟然變得正常了,和IE下一樣,真是奇怪了,width:100%-20這樣的定義應該是錯的呀!但卻解決了Firefox把margin算進去的問題,進一步試下,發現隨便100%減隨便一個數字都可以,查了些資料,一直沒有明白是什麼原因。
或許就是個bug,呵呵!也許哪個高手知道原因。自己做過測試,把程式碼和截圖貼上來:
Firefox下樣式設定寬度奇怪現象_經驗交流



[​​Ctrl A 全選注:如需引入外部Js需刷新才能執行]
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板