Webkit（Safari / Chrome）使浮动元素的百分比不准确

Question

我有两个浮动的容器，它们占据了父元素的100％宽度。

我有这个HTML：

<div class="box">1</div>
<div class="box half">2</div>
<div class="box half">2</div>

这个CSS：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box; 
}

body, html {
    margin: 0;
    padding: 0;    
}

body {
    width: 420px;
    margin: 0 auto;
}

.box {
    float: left;    
    width: 100%;
    margin: 0;
    border: 1px solid red;
}

.box.half {
    width: 49.2%;
    margin-right: 1.6%; 
}

.box.half + .box.half {
    margin-right: 0;
}

在Firefox中，这很好用，但Chrome和Safari搞错了。它适用于某些屏幕尺寸（看起来像结果尺寸是整数）但不是全部。我能做些什么来解决这个问题吗？

查看此fiddle。

Answer 1

我在Chrome和Firefox上查了没有问题，但在safari（mac）中，我发现了它。

之前从未想过这一点，谢谢你。我的解决方案是让右边的框浮动。

.box.half + .box.half {
   margin-right: 0;
   float:right;
}