浏览器对css小数点的处理

NikoManiac 发布于2019-08-29 14:09 / 2643人阅读

摘要：但是通过分析验证了问题所在，之后遇到这种情况的时候便有了解决办法合理设置百分比，使其计算结果小数点，进而四舍五入之后宽度大于实际渲染宽度

近期在开发的时候遇到一个奇怪的问题，如下图(ios系统，android暂未发现)，第一个和第三个子元素中的角标与父元素始终有一条缝隙，但是第二个没有，因为第一次遇到，没有意识到是小数点的问题，然后从头到尾重新看了相关的样式，布局，设置都没有问题，但是那条缝又明明确确的在那儿

核心代码：

ul {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    li {
        position: relative;
        width: 32%;
        ...
        span {
            position: absolute;
            right: 0;
            top: 0;
            ...
        }
    }
}

秉着实践出结果，开始调试（iphone6），所有布局相关的样式一个个改值，最后在同事的帮助下，发现把width改为31.5%之后就可以了，此时意识到与css小数点有关系

于是针对这个来分析（下面分析仅仅作为参考，浏览器内核到底怎么工作的，safari和chrome又分别做了什么暂不清楚）：

iphone6宽度为375px，ul宽度为345px，所以32%和31.5分别是110.4和108.675，果然四舍五入之后，前者变小后者变大。网上查找之后说是，浏览器会对css小数点有不同的处理规则，ie向下取整，chrome，safari等四舍五入，参考这两篇文章css布局单元，css小数像素问题

大致了解为什么会出现这种情况之后，针对自己这个问题，从深层次的角度分析一下原因，见上述参考链接，webkit内核在渲染元素时，真实渲染区域是固定不变的，但是在文档流中的空间大小是计算出来的，所以直接影响到了下一个元素，出现了第二个元素与第一个元素表现形式不同的情况。如下图是webkit计算方式：

按照上面计算方式计算宽度为32%时，三个元素的结果如下：

第一个li，x = 15，width = round(15+110.4) - round(15) = 110
第二个li，x = 125.4，width = round(125.4+110.4) - round(125.4) = 111
第三个li，x = 235.8，width = round(235.8+110.4) - round(235.8) = 110

我们可以发现，第一个li，实际渲染区域宽度为110.4，但是文档流中宽度为110，所以子元素可活动区域为110，那0.4便是那条空隙
第二个li，实际渲染区域也是110.4，但是文档流中宽度为111，同理第三个计算为110，这便也解释了为什么一三表现形式一样

同理，宽度为31.5时，width分别为：109，109，109，实际渲染宽度为108.675

经过测试验证，ios系统内，safari和应用内webview效果与分析一致，但是通过dom获取元素width时，与上面计算结果不一致，全部都是四舍五入之后的结果，这一点没有搞清楚。但是通过分析验证了问题所在，之后遇到这种情况的时候便有了解决办法：

合理设置百分比，使其计算结果小数点>=5，进而四舍五入之后宽度大于实际渲染宽度

GPU云服务器云服务器浏览器对和css3的支持 js编辑对图片的处理 js对json数据的处理 html5对浏览器的支持

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112958.html

css值

摘要：表示用户代理的默认值。但在某些情况下这个值非常有用。这是结合形成文档后所得到的值。开发者指定值种用户代理默认值不可更改具有中划线的值表示被层叠规则覆盖即被权重大的给覆盖了样式。 CSS值的来源首先,我们知道CSS虽然语法简单，但也不是瞎写的，其属性和值都是官方定义好了的,确切的说是浏览器厂商定义好的。这些给定的值无外乎来源以下情况： inherit 表示从祖先元素继承得到值。每个...

X1nFLY 2019-08-30 15:52 评论0 收藏0
我的第一次移动端页面制作 — 总结与思考

摘要：最近被分配到移动端开发组，支持某活动的页面页面制作。这算是我第一次真正接触移动端页面制作，下面就谈谈个人总结和思考。这无疑会增强程序的可维护性。规范正如上面讨论的，一个页面由多个组成。的兼容性在安卓及以下是不支持的。最近被分配到移动端开发组，支持某活动的页面页面制作。这算是我第一次真正接触移动端页面制作，下面就谈谈个人总结和思考。整体流程开会大体讲解、讨论与排期 -> 交互设计 ...

voyagelab 2019-08-29 11:32 评论0 收藏0
我的第一次移动端页面制作 — 总结与思考

摘要：最近被分配到移动端开发组，支持某活动的页面页面制作。这算是我第一次真正接触移动端页面制作，下面就谈谈个人总结和思考。这无疑会增强程序的可维护性。规范正如上面讨论的，一个页面由多个组成。的兼容性在安卓及以下是不支持的。最近被分配到移动端开发组，支持某活动的页面页面制作。这算是我第一次真正接触移动端页面制作，下面就谈谈个人总结和思考。整体流程开会大体讲解、讨论与排期 -> 交互设计 ...

Cheng_Gang 2019-08-01 15:55 评论0 收藏0
移动端h5页面适配

摘要：一直对页面充满崇敬揣着忐忑的心开始了我的之旅。但实际情况却并非如此理由如上但在移动设备上，必须弄明白这点。其他品牌的移动设备也是这个道理。一直对h5页面充满崇敬,揣着忐忑的心开始了我的h5之旅。才发现直接照抄网上的方案是很容易,但是想真的了解内部的原理,这就给我了一个下马威了.通过在网上各种找资料,才将各种概念以及原理了解清楚.故写下这篇文章用于积累知识,如有问题,欢迎指正! 在开始...

张率功 2019-08-22 18:18 评论0 收藏0