繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > Firefox下样式设置宽度奇怪现象
- CSS样式表
- CSS3教程(10):CSS3 HSL声明设置颜色
- CSS3教程:新增加的结构伪类
- 网页布局绝对定位(position)轻松简单
- 掌握盒模型轻松DIV CSS网页布局
- 实例方式学CSS text-align怎么用
- 网页重构时在IE6中遇到png兼容性
- CSS3教程:边框属性border的极致应用
- CSS网页布局使用表格可以吗？
- 最新版本的CSS选择器浏览器支持情况
- 有序列表和段落设计华丽的网页列表数字
- CSS教程:通过实例学习和理解CSS盒模型
- CSS网页布局的核心内容:CSS盒模型
- CSS3伪类选择器：nth-child()
- CSS教程：inline-block在各浏览器的显示
- CSS实现网页分栏布局的方法：绝对定位和浮动
- CSS实例：用CSS制作网页像素画
- CSS教程：三列固定网页布局实例
- 无hack无js全兼容text-overflow-ellipsis效果
- CSS解决方案：IE6中遇到png兼容性
- CSS学习之类目之间竖线的练习实例
CSS样式表 中的 Firefox下样式设置宽度奇怪现象
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 160 ::
收藏到网摘: n/a
前段时间做项目时碰到一个奇怪的现象 页面中有一个数据列表，是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 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
评论 (0) All
