百分比舍入区域的 CSS 修复答案

【问题标题】：CSS fix for percentage rounding areas百分比舍入区域的 CSS 修复
【发布时间】：2014-07-31 19:57:59
【问题描述】：

所以我有一个网格分成三个偶数列，当将它们设置为 33.33% 时，由于舍入错误（主要在 Safari 中），在列的末尾会留下一个小间隙。

我尝试通过给列增加一点 (33.5%) 并隐藏最后的 0.5% 来解决此问题。但它不起作用。这是我的代码：

<div class="grid-outer">
    <div class="grid-inner">
         <div class="box" style="background: green"></div>
         <div class="box" style="background: red"></div>
         <div class="box" style="background: gray"></div>
    </div>
</div>

—

.grid-outer {
    width: 100%;
    overflow: hidden;
    background: lightyellow;
}

.grid-inner {
    width: 100.5%;
    overflow: hidden;
}

.box {
    float: left;
    width: 33.5%;
    height: 20px;
 }

但由于某种原因它没有按预期工作？我的代码正确吗？

这里的JSFiddle：https://jsfiddle.net/2snT4/

【问题讨论】：

让容器保持 100%，并将框的宽度设置为 33.33333333%
因为这会给你 100.5% 的 100.5%，即 101.0025%

标签： html css multiple-columns rounding percentage

【解决方案1】：

你的百分比在小提琴上是不正确的。但是，使用正确的百分比，浏览器中存在舍入误差。 Firefox 在将 DIV 居中时也有类似的问题。有些浏览器处理得更好（例如 Chrome）。我确定要绕过它的唯一方法是使用桌子，但这确实有点混乱和其他缺点；不是一个好的解决方案。

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

.grid-outer {
    width: 100%;
    background: lightyellow;
}

.grid-inner {
    width: 100%;
}

.box {
    float: left;
    width: 33.33333333333%;
    height: 20px;
}

<div class="grid-outer">
    <div class="grid-inner">
         <div class="box" style="background: green"></div>
         <div class="box" style="background: red"></div>
         <div class="box" style="background: gray"></div>
    </div>
</div>

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

.grid-outer {
    width: 100%;
    background: lightyellow;
}

.grid-inner {
    width: 100%;
}

.box {
    float: left;
    width: 33.33333333333%;
    height: 20px;
}

【讨论】：