Css Internet Explorer中的浮动和百分比高度和宽度

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

它在Webkit浏览器和Firefox中工作得非常好，只需看看这个JSFIDLE：

我使用此技术从当前宽度指定高度：

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

高度代码（20%宽度块）

高度代码（30%宽度块）

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

---

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

使用浮点数使其工作起来并不容易，而且我无法找到令人满意的解决方案。然而，我确实找到了一个类似的解决方案，内联块最终看起来完全一样。要点：

a） 更改<代码>浮动：左至

显示：内联块内部
.mosaic li{}

b） 确保
元素之间没有空格（否则将存在水平间隙）

c） 添加
行高：0
至
.mosaic{}
（否则将存在垂直间隙）

结果js fiddle:
出现问题是因为IE在处理亚像素尺寸时总是向下取整。考虑到CSS浮动是如何工作的，这种舍入在这种情况下会导致一个问题。关键是手动强制两种瓷砖的高度值完全相同。我正在寻找实现这一目标的最佳方法。即，不要将出现的高度分别为353.18px和35.19px的问题四舍五入。仅仅百分之一像素就足够了！仍在进行舍入，仅为0.01px。我猜IE会四舍五入（因此偶尔会损失0.01px），其他浏览器很可能会四舍五入到最近的位置，并在这种情况下获得像素完美的分数布局。我喜欢这种解决方案，但我的项目几乎完成了，所以现在更改所有内容会对已经完成的工作产生太大影响。我用了清楚的：都在右边：n个孩子。
.mosaic li::after {
    display:block;
    padding-top:100%;
    content: '';
}

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