部分手机 CSS 百分比数值出现的问题

<div class="captcha-image-wrapper">
	<div class="captcha-slider-block" style="background-color:#2FDE4B;width:18%"></div>
	<div class="captcha-slider-block" style="background-color:#F98126;width:17%"></div>
	<div class="captcha-slider-block" style="background-color:#52A8E9;width:18%"></div>
	<div class="captcha-slider-block" style="background-color:#000000;width:16%"></div>
	<div class="captcha-slider-block" style="background-color:#F03A6E;width:16%"></div>
	<div class="captcha-slider-block" style="background-color:#FADC04;width:15%"></div>
</div>

以上代码中 .captcha-slider-block 为 inline-block (源代码中div之间并没有换行或空格，在这里换行只是为了方便阅读)，按道理这6个div应该是占满整个父级元素的，但是在安卓版本为 4.2.2（联想 S898t+）以及安卓 4.4.2（华为荣耀6plus）的自带浏览器里面，这6个元素加起来的宽度会比父级元素的宽度小了3个像素的大小，排查了一下似乎是安卓手机的浏览器对宽度设定为百分比的宽度渲染有点问题。

以下为正常情况下的6个元素的实际宽度以及父级元素的实际宽度：

$0.clientWidth // $0 => .captcha-image-wrapper
// 268
var arr = [].slice.call($0.querySelectorAll('div'))
arr.forEach(item => console.log(item.clientWidth))
// 48
// 46
// 48
// 43
// 43
// 40

这是出现问题的手机的：

$0.clientWidth // $0 => .captcha-image-wrapper
// 268
var arr = [].slice.call($0.querySelectorAll('div'))
arr.forEach(function (item) {console.log(item.clientWidth)})
// 48
// 45
// 48
// 42
// 42
// 40

可以看到，第二个、第四个以及第五个元素的宽度实际上比正常情况的都小1px，而直接计算百分比可得：

$0.clientWidth * 0.16
// 42.88
$0.clientWidth * 0.17
// 45.56

这两种情况在正常的浏览器里面都是根据四舍五进的原则依次+1了，而在有问题的手机里面则是简单的去掉小数部分而已。因此也就造成了实际拼接起来的宽度比父级元素小3px大小。

Serenader

Learning by sharing

部分手机 CSS 百分比数值出现的问题