Question

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

我试图通过给予一些额外的（33.5％）列并隐藏最后的.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：http://jsfiddle.net/2snT4/

Answer 1

小提琴的百分比不正确。但是，使用正确的百分比，浏览器中存在舍入错误。在集中DIV时，Firefox也有类似的问题。有些浏览器可以更好地处理它（例如Chrome）。我唯一知道的方法是使用一张桌子，但这确实有点混乱和其他缺点;不是一个好的解决方案。

http://jsfiddle.net/2snT4/3/

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

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

.grid-inner {
    width: 100%;
}

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

CSS修复百分比舍入区域

1 个答案: