html - 显示 :table-cell behaving differently in Firefox and Chrome

Question

我在 Chrome 中构建了一个图表，如下所示:

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

我很确定这种差异是 display:table-cell 在两个浏览器中的处理方式不同造成的。但我不确定如何解决它。我上传了一个现场演示 here这样您就可以检查代码。

Answer 1

为了修复它:

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