Internet Explorer 中的浮点数和百分比高度和宽度答案

【问题标题】：Floats and percentage heights and widths in Internet ExplorerInternet Explorer 中的浮点数和百分比高度和宽度
【发布时间】：2014-02-23 08:11:18
【问题描述】：

我有一个使用宽度和高度百分比的浮动框的流畅马赛克。

它在 Webkit 浏览器和 Firefox 中运行良好，看看这个 jsfiddle： http://jsfiddle.net/Mtk57/

问题在于具有不同宽度块的行，2 个 30% 的块和 2 个 20% 的块。

高度代码（20% 宽度的块）

.mosaic li::after {
    display:block;
    padding-top:100%;
    content: '';
}

高度代码（30% 宽度的块）

.mosaic li::after {
    padding-top:66.6666666666666666666667%;
}

在 Internet Explorer 中，高度的小数点略有不同，似乎足以防止块在下一行的开头掉落。 Internet Explorer 似乎没有对像素值进行四舍五入，为什么？

我想我可以说清楚：两者；使用 :nth-child，但我想知道是否有更好的解决方案。

【问题讨论】：

出现问题是因为IE在处理亚像素尺寸时总是向下取整。考虑到 CSS 浮动的工作原理，这种向下舍入会在这种情况下导致问题。关键是手动强制两种瓷砖的高度值完全相同。我正在寻找实现这一目标的最佳方法。
IE 不会对 353.18px 和 35.19px 高度出现的问题进行四舍五入。百分之一像素就够了！
仍有四舍五入，只有 0.01 像素。我猜 IE 会向下舍入（因此偶尔会丢失 0.01px），其他浏览器很可能会舍入到最接近的位置，并在这种情况下获得像素完美的小数布局。

【解决方案1】：

让它与浮点数一起工作并不容易，我也想不出一个令人满意的解决方案。但是，我确实找到了一个类似的解决方案，其中内联块最终看起来完全相同。要点：

a) 将float: left; 内的display: inline-block; 更改为.mosaic li {}

b) 确保<li> 元素之间没有空格（否则会出现水平间隙）。

c) 将line-height: 0; 添加到.mosaic {}（否则会出现垂直间隙）。

【讨论】：