Question

尝试将窗口调整到最小（CTRL-）： http://jsfiddle.net/Zty9k/13/

HTML

<ul>
    <li><img src="http://i.imgur.com/PBuDAFH.gif"></li>
    <li><img src="http://i.imgur.com/PBuDAFH.gif"></li>
    <li><img src="http://i.imgur.com/PBuDAFH.gif"></li>
    <li><img src="http://i.imgur.com/PBuDAFH.gif"></li>
</ul>

CSS

ul{
 width:304px;
 padding:0;
 margin:0;
}
ul li{
 float:left;
 list-style: none;
 margin:0;
 border: 1px solid #000;
 height:150px;
}

元素会崩溃。

奇怪的是，当移除边框并将其调整到300px时，屏幕调整大小时元素不会崩溃。

我错过了什么吗？

Answer 1

由于您的图像尺寸为150x150像素。你应该使用你的列表四次的width: 308px;并应用你计算的边界只有4，但你应该计算边界的两边，使它变成2 * 4 = 8px。

demo

或者您可以使用box-sizing。

Answer 2

为了解释您的代码失败的原因，我将首先尝试解释Web浏览器缩放的工作原理：

当您在浏览器中执行缩放操作时，浏览器会对DOM elements（ul，li的所有度量进行乘法或除法（取决于放大或缩小）; img ...）。

因此，在缩小页面后，这就是浏览器解释尺寸的方式：

/*
zoom out 1:2
2px(original) = 1px(zoomed out) 
*/
ul{
 width:152px; /* 304/2 */
 padding:0;
 margin:0;
}
ul li{
 float:left;
 list-style: none;
 margin:0;
 border: 1px solid #000; 
 height:75px; /* 150/2 */
}

边境会发生什么？ 1px是一个大小，不是吗？是的，但是1px无法分割，因为屏幕是由像素组成的，显然你无法渲染0.5px所以缩小后边框尺寸保持1px，这使得li无法浮动。

那么解决方案是什么？

您可以将ul宽度设置为308px，如同@ C-link所说，但这是一种不好的做法try this JSFiddle。仅使用box-sizing属性不起作用，而是可以将其与百分比值组合使用：

ul{
  width:304px;
  padding:0;
  margin:0;
}
ul li{
  float:left;
  list-style: none;
  margin:0;
  border: 1px solid #000;
  width: 50%;
  height: auto; /* set its size to the size of its content */
  -webkit-box-sizing: border-box;    
  -ms-box-sizing: border-box;    
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  display: block; /* To remove the bottom space, comment it to see what happens */
}

Web浏览器页面缩小时元素不会浮动（Ctrl - ）

2 个答案:

那么解决方案是什么？

这是一个demo