html - 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%），因为浏览器的数学引擎几乎总是以不同的方式进行舍入。

Answer 2

问题在于 Firefox 中的相对定位。更改 .series 的位置并进行更多更改，它就可以工作了。在 Firefox 中，%width 实际上是计算外除的百分比，因为是相对定位。