Safari Double Margin Bug - CSS 浮动布局

Question

我制作了一个 CSS 布局，其中包含一个包含 30 个项目的列表。每个 li 的宽度为 9%，右下边距为 1%。我从左到右交替每行的浮动方向，它在除 Safari 之外的所有浏览器中看起来都很好，这是 safari 的所有版本。好像有双倍边距

问题可见here

非常感谢

HTML

<ul class="clearfix">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
</ul>

CSS

body {
    margin: 0;
    padding: 0;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
ul {
    margin: 0;
    padding: 0;
}
li {
    border: 1px solid rgba(1, 1, 1, 0.1);
    border-radius: 3px 3px 3px 3px;
    box-shadow: 1px 1px 0 #FFFFFF inset;
    float: left;
    height: 80px;
    list-style: none outside none;
    margin: 0 1% 1% 0;
    text-align: center;
    overflow: hidden;
    white-space: normal;
    width: 9%;
}
li:nth-child(n+11) {
    background: red;
    float: right;
}
li:nth-child(n+21) {
    background: blue;
    float: left;
}
li:nth-child(n+31) {
    background: red;
    float: right;
}
li:nth-child(n+41) {
    background: blue;
    float: left;
}

Answer 1

我相信这种行为是由 Webkit 处理子像素的方式引起的。子像素是指您使用的宽度百分比最终不会作为整个像素。例如，95px 的 50% 是多少？

所有浏览器都以自己的方式处理这个问题 - John Resig 已经写了一些文章 - 但这里的问题可能是 webkit 舍入子像素向下。如果您在 Safari 中调整渲染窗口的大小，您会发现缩进并不总是那么宽，它几乎会缩小到原位，但在下一个亚像素断点处，缩进会再次变大。

那么如何解决呢？您可以针对 11/21/31 等 li 并给它更大的利润。当我尝试使用 jsfiddle 时，1.2% 似乎还可以。恐怕我想不出更干净的解决方案。