css flex-grow 设置成小数 为什么计算不准确?

2020-06-01 15:17:09 +08:00
 liufei123
<style>
    *{margin: 0;padding: 0;}
    .box{display:flex;width:600px;height:300px;}
    .left{
        flex-grow: 0.991;
        width: 100px;
        background: green;
    }
</style>

<div class='box'>
    <div class="left" id="left"></div>
    <script>
        console.log(document.getElementById('left').getBoundingClientRect().width) //595.484375
    </script>
</div>

在 chrome 打印出来 width 为 595.484375 。 按照 flex 的规范 width 应该为 100+(500*0.991)=595.5 chrome devtools 显示的 width 为 595.48.为什么会出现这种情况啊?

1979 次点击
所在节点    CSS
3 条回复
noe132
2020-06-01 15:37:03 +08:00
猜测:根据 ieee 754 表示,0.991 转换为浮点数时无法精确表示
产生了误差
cheese
2020-06-01 16:10:40 +08:00
精度问题吧,小数无法用二进制表示,转换的时候丢失了精度
ericgui
2020-06-06 11:33:49 +08:00
网上的例子,包括官网,可以是小数,但都是 0.x
比如 0.5,0.6

0.991 肯定有个精度问题额

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/677505

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX