具有css十进制百分比高度的TD单元在Chrome中获得不正确的实际高度

Question

当我试图在表格中创建一个TD网格，并且TD单元格的总高度占表格高度的100％时，我发现当我将TD的css高度设置为一个小数点，计算出的高度大于Chrome 28中的预期高度（并且最后几行变得压扁）。但是当我将css高度更改为整数时，计算出的高度变得正确。

在此处查看问题的复制：http://jsfiddle.net/RUwLH/3/

在该示例中，每个表中有33行。

请注意，每个表的td单元格具有不同的css：

.main td {
    width:50%;
    height: 3.03%;    
}

.main2 td{
       width:50%;
    height: 3.00%;    
}

有趣的是，在IE10中，单元格似乎正确显示，但是2组表格重叠

在FF16中这很好用。

任何人都知道解决这个问题的方法吗？

Answer 1

这可能是基于Webkit的浏览器中的错误。但是你不必要地混淆了表格算法......！当表算法单独执行时，为什么或者应该明确地设置每个TD的高度？因此，避免此问题的最简单方法是简单地为TD设置高度。

请参阅更新的jsFiddle：http://jsfiddle.net/RUwLH/4/

...

从语义的角度来看，你的代码非常值得怀疑，并且给每个元素提供相同的类也是非常低效的CSS（希望你只是为小提琴做过）。

经过这么多年，表仍然是一个“特殊问题”......！因此，只能将它们用于表格数据而不是其他任何内容！

HTML和CSS提供了许多其他更具语义的可能性！