Firefox下样式设置宽度奇怪现象
2008-09-10 23:46
676 查看
页面中有一个数据列表,是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,呵呵!也许哪个高手知道原因。自己做过测试,把代码和截图贴上来:
test
[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,呵呵!也许哪个高手知道原因。自己做过测试,把代码和截图贴上来:
test
数据1 | 数据2 | 数据3 | 数据4 |
数据5 | 数据6 | 数据7 | 数据8 |
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关文章推荐
- Firefox下样式设置宽度奇怪现象
- 关于tableView group样式 时设置 cell的width 宽度
- 进行手持设备wince开发中DataGrid的样式设置(宽度)
- 超出固定宽度出现省略号的样式设置
- span 固定宽度且与其它元素同一行的样式设置
- css基础 设置div标签 宽度 边框线颜色样式 div中文本居中 div块在网页中居中 div中内容距边框线的距离
- CSS属性设置鼠标为手型,cursor:hand 在firefox中的不支持现象
- android 设置AlertDialog样式,宽度为屏幕宽度
- overflow-x和overflow-y其中一个设置为visible时的奇怪现象
- 使用NPOI导出Excel 并设置Excel样式(合并单元格、行高、宽度、字体、边框、位置)
- IE及firefox下获取及设置样式值的代码
- QWidget设置边框(样式,宽度及颜色)
- 为适应不同屏幕的宽度,datagrid用百分比设置宽度,无法事先知道各列的PX值,如何用样式控制内容的截取
- CACTI中NET-SNMP安全级别设置的奇怪现象
- U-mail设置只能路由发不通走中继奇怪现象
- ASP.NET AJAX Advance Tips & Tricks (9) DropDownList在Firefox下的奇怪现象和解决方案——谁的BUG?
- 在wince中DataGrid的样式设置(宽度),智能设备开发,PDA
- IE及firefox下获取及设置样式值的代码
- ie9崩溃现象当js设置tr元素样式为display:none
- 在wince中DataGrid的样式设置(宽度),智能设备开发,PDA