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需再刷新一下页面才能执行]
相关文章
编写好的CSS代码，有助提升页面的渲染速度。本质上，引擎需要解析的CSS规则越少，性能越好。MDN上将CSS选择符归类成四个主要类别，如下所示，性能依次降低2014-03-03
word-wrap:break-word 在firefox中不会起作用，以下是解决办法2008-10-10
转载未知大小的图片在一个已知大小容器中的水平和垂直居中（二）
转载未知大小的图片在一个已知大小容器中的水平和垂直居中（二）...2007-01-01
HTML 向 XHTML1.0 兼容性指导...2006-12-12
CSS控制文本自动换行的问题...2007-04-04
CSS仿淘宝首页导航条布局效果...2007-02-02
不用图片用css实现按钮的美化效果代码2008-05-05
div+css中Class与ID的区别...2007-04-04
推荐三种简洁的Tab导航（网页选项卡）简析...2007-05-05
div+css布局必了解的列表元素ul ol li dl dt dd详解
dt 和dd中可以再加入 ol ul li和p，理解这些以后，在使用div布局的时候，会方便很多，其实w3c提供了很多元素辅助布局都是有它的用处的，而不尽是div。2008-04-04
最新评论