0

30 項目を含む 1 つのリストを持つ CSS レイアウトを作成しました。各 li は幅 9% で、左右に 1% の余白があります。各行のフロート方向を左から右に交互に変更すると、Safari を除くすべてのブラウザーで問題なく表示されます。これは Safari のすべてのバージョンです。倍の余裕があるらしい

問題はここで見ることができます

どうもありがとう

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;
}
4

1 に答える 1

2

この動作は、Webkit がサブピクセルを処理する方法が原因であると考えています。サブピクセルは、最終的にピクセル全体にならない幅のパーセンテージを使用する場合です。たとえば、95px の 50% とは何ですか?

すべてのブラウザは、この問題を独自の方法で処理します - John Resigはそれについて書いています - しかし、ここでの問題は、webkit がサブピクセルを切り捨てることかもしれません。Safari でレンダリング ウィンドウのサイズを変更すると、インデントが常に同じ幅であるとは限らず、元の位置にほぼ縮小しますが、次のサブピクセル ブレークポイントではインデントが再び大きくなります。

それで、それを解決する方法は？11日/21日/31日などをターゲットにしliて、より大きなマージンを与えることができます. jsfiddle で実験したところ、1.2% は問題ないように見えました。もっときれいな解決策を思いつくことができないのではないかと心配しています。

于 2013-05-23T12:09:17.400 に答える