最近做了一个vue组件，UI出图做了一个异形直角面板，对于直角面板可以使用css3的linear-gradient做4幅背景填充实现直角效果，同时要借助backgroud-size对4幅背景做位置和大小调整。具体css样式实现如下：

background: linear-gradient(135deg, transparent 15px, rgba(30, 38, 67, 0.8) 0) top left no-repeat,
    linear-gradient(-135deg, transparent 15px, rgba(30, 38, 67, 0.8) 0) top right no-repeat,
    linear-gradient(-45deg, transparent 15px, rgba(30, 38, 67, 0.8) 0) bottom right no-repeat,
    linear-gradient(45deg, transparent 15px, rgba(30, 38, 67, 0.8) 0) bottom left no-repeat;
background-size: 50% 50%;

本机开发测试都没有问题，但是提供给同事使用时却发现在同事浏览器上背景图片拼接的中间位置多出来一条缝没有填满，而我们对背景大小x轴大小设置的是50%，两幅拼接起来正好填满。在我本机Firefox上填充是正常的，而同事的是Chrome浏览器，难道是浏览器兼容？

再次检查同事使用代码，可疑的地方是他按UI样式对组件宽度设置为291px，难道Chrome计算background-image的background-size由于二等分出现小数点对小数点位数处理出现问题？尝试宽度改为290px果然问题解决。

所以推断Chrome对background-size的计算是直接忽略小数点的，这就导致如果无法整除时对背景填充就会出现问题！！！