繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > Firefox下样式设置宽度奇怪现象
- CSS样式表
- 简单学习CSS网页布局(初学者)
- 8个简单实用的CSS秘诀
- Webjx收集基于CSS JS设计50款优秀的导航菜单
- css word-break word-wrap 前台显示自动换行
- css 自动换行 强制换行属性 (firefox+ie)
- css 教学实例 漂亮的搜索框
- CSS 折叠的菜单实现代码
- 关于html元素的 width属性无效果的解决方法
- css 相对定位 绝对定位 浮动 分析
- css 滑动门技术的介绍及实例分享
- 负边距创建自适应宽度的流体布局的实现方法
- 有利于SEO的DIV+CSS的命名规则小结
- css盒子模型 css margin 外边框合并
- css 优先级关系
- input 文本框 文字垂直居中对齐 ie firefox
- css margin-left在IE6下的问题的解决方法
- IE8样式不正确显示问题
- div中子div在firefox ie 水平居中对齐
- css 不兼容性问题小结
- CSS 3D立方体制作
CSS样式表 中的 Firefox下样式设置宽度奇怪现象
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 228 ::
收藏到网摘: 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
