当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 百分比的细节--容器大小篇

CSS样式表
网页页面原结构和CSS写法导致浏览器兼容问题
CSS经验:ul列表不正确使用的趋势
Styleneat帮助你容易阅读和更新CSS文件
CSS的内容注释和作者及文件版本注释
网页设计制作教程:CSS书写格式
将CSS按照层叠式结构化重新组织与构建
CSS教程之CSS盒模型
CSS 框架BlueTrip特性
IE7和FF浏览器中右下角图片广告
CSS实例:通过定义渐变边框给图片加阴影
网页选项卡TAB设计原则和应用案例教程
8个设计规范的表格Table CSS样式应用
CSS制作的背景动态变化的网页导航
网页选项卡TAB设计原则和应用案例教程
使用CSS给图片添加阴影的方法
WEBJX收集20个高质量的免费CSS模板
13个网页页面浏览器兼容性验证工具
11个用CSS样式表制作网页按钮的教材
CSS3属性使网站设计增强同时不消弱可用性
清理无用的CSS样式的几个有用工具

CSS样式表 中的 百分比的细节--容器大小篇


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 140 ::
收藏到网摘: n/a

因为屏幕能显示的最小单位是1px,对于像773*50%=386.5这样带数字的长度必须有所取舍。
测试页面,一些浏览器的截图标宽度也在里面
IE:按四舍五入的方式计算。
Firefox:计算后的值忽略小数部分,但会把多出的长度分配给里面的各元素。 如果只多出1px,比如2*386=772,剩下的1px会到其中一个元素,优先分配第一个元素,像773px分配给两个50%时得到的是:387px和386px,分配给四个25%时得到的是:194px、193px、193px和193px; 而对于多出几个px,如773*33.3%=257.409,773*33.33%=257.6409,由于忽略掉的小数不一样,分配的原则也不一样,找不到相关资料,以下是我的猜想,三个元素的,按四舍五入的方式分配,四舍的优先分配给两边,五入的优先分配给前边两个,对于分配给三个元素以上的,多出部分自由分配,我找不到规律,但第一个一定会分配到。
FF还有一些奇怪的地方。Firefix测试页面。1024宽度不会自动分配,也许是因为外层也是带小数的,导致1px没分配,接着测试Firefox
Opera & Safari2:计算时忽略百分比的小数部分,计算后的值忽略小数部分,如果里面的元素大于计算后的宽度不会导致后面的元素换行。
Netscape & Mozilla:计算后忽略小数,多出部分有点类似Firefox,但多出部分是比透明显示,而且比较奇怪,比如33.33%*3=99.99% 小于100%,但却大于100%,奇怪的浏览器,还好使用的人不多,不用过于在意这两个浏览器。
测试没完成,有兴趣的朋友帮忙测试,单独的测试页,有知道原因的朋友讲一下下