html - Webkit(Safari/Chrome)在 float 元素上呈现百分比不准确的边距

Question

我有两个 float 的容器，它们应该占据父元素的 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;
}