Safari Double Margin Bug - CSS Float Layout

Question

Я создал раскладку css, в которой есть один список из 30 элементов. Каждый лит составляет 9% ширины с 1% краем справа и снизу. Я чередую направление float в каждой строке слева направо, и он выглядит хорошо во всех браузерах, кроме 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 субпиксели. Подпиксели - это когда вы используете процент ширины, который не заканчивается как целый пиксель. Например, что такое 50% от 95 пикселей?

Все браузеры решают эту проблему по-своему - John Resig сделал некоторые письма по этому поводу - но вопрос здесь может быть то, что WebKit раундов субпикселей вниз. Если вы измените размер окна рендеринга в Safari, вы обнаружите, что отступ не всегда такой же широкий, он почти сжимается на месте, но на следующей контрольной точке субпикселя отступ больше.

Итак, как его решить? Вы можете настроить таргетинг на 11-й/21-й/31-й и т. Д. li и дать ему больший запас. 1,2% выглядели нормально, когда я экспериментировал с jsfiddle. Боюсь, я не могу придумать более чистое решение.