css - Internet Explorer 中的 float 和百分比高度和宽度

Question

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

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

我使用这种技术从当前宽度指定高度: http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio

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

高度代码(20% 宽度 block )

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

高度代码(30% 宽度 block )

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

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

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

Answer 1

让它与 float 一起工作并不容易，我也想不出一个令人满意的解决方案。但是，我确实找到了一个类似的内联 block 解决方案，最终看起来完全一样。要点:

a) 改变float: left;至 display: inline-block;里面.mosaic li {}

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

c) 添加line-height: 0;至 .mosaic {} (否则会有垂直间隙)。

生成的 js-fiddle:http://jsfiddle.net/RN4pj/2/