缩小 Web 浏览器页面时元素不浮动 (Ctrl -)答案

【问题标题】：Elemets don't float when web browser page is zoomed out (Crtl -)缩小 Web 浏览器页面时元素不浮动 (Ctrl -)
【发布时间】：2013-12-05 11:57:14
【问题描述】：

尝试将窗口大小调整到最小（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;
}

元素将折叠。

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

我错过了什么吗？

【问题讨论】：

崩溃是什么意思？在我的情况下，它们不再彼此相邻。是这个意思吗？

标签： css css-float border elements zooming

【解决方案1】：

因为您的图片尺寸为 150x150 像素。您应该使用width: 308px;，您的列表是四次，并应用您计算的边框为 4，但您应该计算边框的两侧，使其变为 2*4 = 8px。

demo

您也可以使用box-sizing。

【讨论】：

【解决方案2】：

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

当您在浏览器中执行缩放操作时，浏览器会乘以或除以（取决于您是放大还是缩小）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 */
}

这是一个demo

【讨论】：