Safari双边距错误-CSS浮动布局
我已经做了一个css布局,其中有一个30项的列表。每个li的宽度为9%,右侧和底部的边距为1%。我在每一行上从左到右交替浮动方向,它在除Safari之外的所有浏览器中看起来都很好,这是Safari的所有版本。它似乎有两倍的利润 问题显而易见 非常感谢 HTMLSafari双边距错误-CSS浮动布局,css,safari,Css,Safari,我已经做了一个css布局,其中有一个30项的列表。每个li的宽度为9%,右侧和底部的边距为1%。我在每一行上从左到右交替浮动方向,它在除Safari之外的所有浏览器中看起来都很好,这是Safari的所有版本。它似乎有两倍的利润 问题显而易见 非常感谢 HTML 我相信这种行为是由Webkit处理子像素的方式造成的。子像素是指使用某个宽度的某个百分比而不是整个像素。例如,95像素的50%是什么 所有浏览器都以自己的方式处理这个问题——对此已经做了一些研究——但这里的问题可能是webkit将子像素舍
我相信这种行为是由Webkit处理子像素的方式造成的。子像素是指使用某个宽度的某个百分比而不是整个像素。例如,95像素的50%是什么 所有浏览器都以自己的方式处理这个问题——对此已经做了一些研究——但这里的问题可能是webkit将子像素舍入。如果在Safari中调整渲染窗口的大小,您会发现缩进并不总是那么宽,它几乎会收缩回原位,但在下一个子像素断点处,缩进再次变大
那么如何解决呢?您可以瞄准11/21/31 etc
li
,给它一个更大的利润空间。当我尝试使用JSFIDLE时,1.2%似乎还可以。恐怕我想不出更干净的解决方案了。Hm,在Chrome和Safari(Mac)中呈现的效果对我来说完全一样。@ralph.m是webkit的两倍。将其与firefox进行比较。我在firefox中也是如此。:-)@ralph.m我看到了一个不同点:第二行在safari中缩进,但在Firefox中,Chrome和safari在mac上的渲染效果不同,这两个都是坏的。谢谢你。这是我找到的最好的答案,我在整个互联网上搜索了一段时间。
<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>
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;
}