Firefox下样式设置宽度奇怪现象
更新时间：2008年09月10日 23:46:10 作者：
前段时间做项目时碰到一个奇怪的现象
页面中有一个数据列表，是table，放在一个div窗口中，结构如下：
<body>
<div id="container">
<table id="grid">....列表数据....</table>
</div>
</body>
给 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，呵呵！也许哪个高手知道原因。自己做过测试，把代码和截图贴上来：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
复制代码 代码如下:
<body>
<div id="container">
<table id="grid">....列表数据....</table>
</div>
</body>
给 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，呵呵！也许哪个高手知道原因。自己做过测试，把代码和截图贴上来：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
相关文章
HTML5扩展itemscope, itemtype, itemprop微数据的解释和应用
微数据是一种用于在HTML页面中标记内容的规范,以便机器能够识别和理解特定类型的信息,通过使用特定的标签、属性和格式,微数据的语法包括itemscope、itemprop和itemtype等属性,可以用来定义和组织数据项,微数据的广泛应用可以改善搜索结果的质量,为用户提供更好的浏览体验2024-12-12
一边固定宽度，另一边根据浏览器窗口大小自动缩放宽度是这种很常用的布局。特别是在BS项目的界面设计中，几乎都会用到。2008-09-09
用iframe margin实现调用其他网页的某一区域的方法
用iframe margin实现调用其他网页的某一区域的方法...2007-12-12
不管你信不信，CSS和JavaScript开始重叠，就像CSS增加了更多功能一新。2014-05-05
需要标准布局的朋友，经常会遇到一些问题，下面是一些布局问题2008-11-11
一个很显浅的寓言，千年老树，电打雷劈，屹立不倒，却毁于蝼蚁的侵袭之下。自以为精通CSS的人，常常被一些小问题搞到头晕脑胀。2010-01-01![[转]Accesskey引起的一点点思考](//img.jbzj.com/images/xgimg/bcimg6.png)
[转]Accesskey引起的一点点思考...2007-02-02
学习样式表CSS参考-常用的CSS知识...2007-09-09
一场疫情过后，又要经历一次次面试，今天小编给大家分享前端面试学习中几个常见有用的知识点，非常不错，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下2022-12-12
使用CSS不用程序实现文字自动截断 用省略号代替...2007-11-11
![[转]Accesskey引起的一点点思考](http://img.jbzj.com/images/xgimg/bcimg6.png)
最新评论