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

CSS样式表
css ID类和class类的长命名与短命名
CSS background-position的使用说明详解
利用CSS定位背景图片 background-position
CSS 多图片融合背景定位的应用于优缺点分析
CSS实现的图片宽高自适应固定边框
css 背景图片定位在菜单效果中的应用实例
CSS 速记口诀 可以解决一些常见问题
CSS 多浏览器兼容性问题及解决方案
css 行级元素在多浏览器下的宽度问题 与解决方法
IE下行框高度的问题
CSS 实现的图片宽高自适应固定边框
css的核心内容 标准流、盒子模型、浮动、定位等分析
CSS 超出隐藏实现限制字数的功能代码(多浏览器)
Div+CSS 布局入门教程之二 构建网站
CSS 网页布局中文排版的9则技巧
CSS网页布局25个实用小技巧
网页制作 默认Web字体样式
IE与Firefox的CSS兼容大全 推荐
css 非表格垂直对齐效果代码
css cursor 的可选值(鼠标的各种样式)

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 69 ::
收藏到网摘: 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%,奇怪的浏览器,还好使用的人不多,不用过于在意这两个浏览器。
测试没完成,有兴趣的朋友帮忙测试,单独的测试页,有知道原因的朋友讲一下下