Firefox下樣式設(shè)置寬度奇怪現(xiàn)象
更新時(shí)間：2008年09月10日 23:46:10 作者：
前段時(shí)間做項(xiàng)目時(shí)碰到一個(gè)奇怪的現(xiàn)象
頁(yè)面中有一個(gè)數(shù)據(jù)列表，是table，放在一個(gè)div窗口中，結(jié)構(gòu)如下：
<body>
<div id="container">
<table id="grid">....列表數(shù)據(jù)....</table>
</div>
</body>
給 container 設(shè)置了樣式 #container {width:100%; margin:10px;}
給 grid 設(shè)置了樣式 #grid {width:100%}
測(cè)試結(jié)果在IE中正常，在 Firefox 下 container 的實(shí)際寬度會(huì)超過(guò)100%而出現(xiàn)橫向滾動(dòng)條,因?yàn)镕irefox把margin算進(jìn)了寬度，實(shí)際等于100%+20px>100%。
當(dāng)然可以去掉div的margin定義，改用body的padding來(lái)設(shè)置，但是頁(yè)面中有其他內(nèi)容要占滿(mǎn)整個(gè)頁(yè)。
于是以前為了解決這個(gè)問(wèn)題會(huì)給div在Firefox區(qū)別定義一個(gè)width:98%,這樣好像是解決了問(wèn)題，但是如果瀏覽器窗口變小，F(xiàn)irefox下的98%+20px說(shuō)不定就又大于100%而出現(xiàn)橫向滾動(dòng)條。
出于試試看的心理，我把container的樣式改成了#container {width:100%-20; margin:10px}，再到Firefox下去看看，呵呵，竟然變得正常了，和IE下一樣，真是奇怪了，width:100%-20這樣的定義應(yīng)該是錯(cuò)誤的呀！但是卻解決了Firefox把margin算進(jìn)去的問(wèn)題，進(jìn)一步試下，發(fā)現(xiàn)隨便100%減隨便一個(gè)數(shù)字都可以，查了些資料，一直沒(méi)有明白是什么原因。
或許就是個(gè)bug，呵呵！也許哪個(gè)高手知道原因。自己做過(guò)測(cè)試，把代碼和截圖貼上來(lái)：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
復(fù)制代碼 代碼如下:
<body>
<div id="container">
<table id="grid">....列表數(shù)據(jù)....</table>
</div>
</body>
給 container 設(shè)置了樣式 #container {width:100%; margin:10px;}
給 grid 設(shè)置了樣式 #grid {width:100%}
測(cè)試結(jié)果在IE中正常，在 Firefox 下 container 的實(shí)際寬度會(huì)超過(guò)100%而出現(xiàn)橫向滾動(dòng)條,因?yàn)镕irefox把margin算進(jìn)了寬度，實(shí)際等于100%+20px>100%。
當(dāng)然可以去掉div的margin定義，改用body的padding來(lái)設(shè)置，但是頁(yè)面中有其他內(nèi)容要占滿(mǎn)整個(gè)頁(yè)。
于是以前為了解決這個(gè)問(wèn)題會(huì)給div在Firefox區(qū)別定義一個(gè)width:98%,這樣好像是解決了問(wèn)題，但是如果瀏覽器窗口變小，F(xiàn)irefox下的98%+20px說(shuō)不定就又大于100%而出現(xiàn)橫向滾動(dòng)條。
出于試試看的心理，我把container的樣式改成了#container {width:100%-20; margin:10px}，再到Firefox下去看看，呵呵，竟然變得正常了，和IE下一樣，真是奇怪了，width:100%-20這樣的定義應(yīng)該是錯(cuò)誤的呀！但是卻解決了Firefox把margin算進(jìn)去的問(wèn)題，進(jìn)一步試下，發(fā)現(xiàn)隨便100%減隨便一個(gè)數(shù)字都可以，查了些資料，一直沒(méi)有明白是什么原因。
或許就是個(gè)bug，呵呵！也許哪個(gè)高手知道原因。自己做過(guò)測(cè)試，把代碼和截圖貼上來(lái)：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
HTML5擴(kuò)展itemscope,?itemtype,?itemprop微數(shù)據(jù)的解釋和應(yīng)用
微數(shù)據(jù)是一種用于在HTML頁(yè)面中標(biāo)記內(nèi)容的規(guī)范,以便機(jī)器能夠識(shí)別和理解特定類(lèi)型的信息,通過(guò)使用特定的標(biāo)簽、屬性和格式,微數(shù)據(jù)的語(yǔ)法包括itemscope、itemprop和itemtype等屬性,可以用來(lái)定義和組織數(shù)據(jù)項(xiàng),微數(shù)據(jù)的廣泛應(yīng)用可以改善搜索結(jié)果的質(zhì)量,為用戶(hù)提供更好的瀏覽體驗(yàn)2024-12-12
左側(cè)固定寬度，右側(cè)自適應(yīng)寬度的CSS布局
一邊固定寬度，另一邊根據(jù)瀏覽器窗口大小自動(dòng)縮放寬度是這種很常用的布局。特別是在BS項(xiàng)目的界面設(shè)計(jì)中，幾乎都會(huì)用到。2008-09-09
用iframe margin實(shí)現(xiàn)調(diào)用其他網(wǎng)頁(yè)的某一區(qū)域的方法
用iframe margin實(shí)現(xiàn)調(diào)用其他網(wǎng)頁(yè)的某一區(qū)域的方法...2007-12-12
不管你信不信，CSS和JavaScript開(kāi)始重疊，就像CSS增加了更多功能一新。2014-05-05
標(biāo)準(zhǔn)布局常見(jiàn)問(wèn)題及解決辦法
需要標(biāo)準(zhǔn)布局的朋友，經(jīng)常會(huì)遇到一些問(wèn)題，下面是一些布局問(wèn)題2008-11-11
一個(gè)很顯淺的寓言，千年老樹(shù)，電打雷劈，屹立不倒，卻毀于螻蟻的侵襲之下。自以為精通CSS的人，常常被一些小問(wèn)題搞到頭暈?zāi)X脹。2010-01-01![[轉(zhuǎn)]Accesskey引起的一點(diǎn)點(diǎn)思考](http://img.jbzj.com/images/xgimg/bcimg6.png)
[轉(zhuǎn)]Accesskey引起的一點(diǎn)點(diǎn)思考
[轉(zhuǎn)]Accesskey引起的一點(diǎn)點(diǎn)思考...2007-02-02
學(xué)習(xí)樣式表CSS參考-常用的CSS知識(shí)
學(xué)習(xí)樣式表CSS參考-常用的CSS知識(shí)...2007-09-09
前端面試學(xué)習(xí)中幾個(gè)常見(jiàn)有用的知識(shí)點(diǎn)
一場(chǎng)疫情過(guò)后，又要經(jīng)歷一次次面試，今天小編給大家分享前端面試學(xué)習(xí)中幾個(gè)常見(jiàn)有用的知識(shí)點(diǎn)，非常不錯(cuò)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下2022-12-12
使用CSS不用程序?qū)崿F(xiàn)文字自動(dòng)截?cái)?用省略號(hào)代替
使用CSS不用程序?qū)崿F(xiàn)文字自動(dòng)截?cái)?用省略號(hào)代替...2007-11-11