因为屏幕能显示的最小单位是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%，奇怪的浏览器，还好使用的人不多，不用过于在意这两个浏览器。
测试没完成，有兴趣的朋友帮忙测试，单独的测试页，有知道原因的朋友讲一下下
0
0
百分比的细节－－容器大小篇_经验交流
php中文网
发布时间：2016-05-16 12:08:05
|3158人浏览过
|来源于php中文网
原创
相关文章
css网页在不同屏幕下按钮尺寸不统一怎么办_使用百分比宽度和media查询调整
css中flex-shrink属性是什么
CSS盒模型在响应式布局中的应用_percentage与em单位实践
CSS Flexbox如何实现弹性宽度元素_flex-grow flex-shrink自动扩缩
css中flex-basis的使用
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
C++ 高级模板编程与元编程
本专题深入讲解 C++ 中的高级模板编程与元编程技术，涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例，帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码，并提升代码的灵活性与性能。
10
2026.01.23
Golang 性能分析与pprof调优实战
本专题系统讲解 Golang 应用的性能分析与调优方法，重点覆盖 pprof 的使用方式，包括 CPU、内存、阻塞与 goroutine 分析，火焰图解读，常见性能瓶颈定位思路，以及在真实项目中进行针对性优化的实践技巧。通过案例讲解，帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。
9
2026.01.22
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
黑马云课堂jQuery基础视频教程
共46课时 | 10.1万人学习
【小白入门 通俗易懂】一周学会Linux
共154课时 | 24.1万人学习
一周时间让你轻松掌握Linux
共153课时 | 21.9万人学习
最新文章
