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

Question

我在Chrome中构建了一个图形，如下所示：

但在Firefox中看起来像这样：

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

Answer 1

为了解决问题：

1. 将display: table-row应用于.graph
2. 在inline-block
上使用table-cell代替.series
3. 避免使用疯狂的浮点数百分比（例如 14.2857％），因为浏览器的数学引擎几乎总是以不同的方式进行舍入。

Answer 2

问题在于firefox的相对定位。更改.series的位置和一些更改，它的工作原理。 在firefox中，由于相对定位，％width实际上是计算外部除法的百分比。