display:table-cell在Firefox和Chrome中的表现不同

Question

我在Chrome中构建了一个图形,如下所示:

但在Firefox中,它看起来像这样:

我很确定这种差异是display:table-cell在两个浏览器中以不同方式处理的结果.但我不确定如何解决它.我在这里上传了一个实时演示,以便您可以检查代码.

Answer 1

为了解决它:

1. 适用display: table-row于.graph
2. 使用inline-block,而不是table-cell对.series
3. 避免使用疯狂的浮点数百分比(如14.2857%),因为浏览器的数学引擎几乎总是以不同的方式进行舍入.