display:table-cell 在 Firefox 和 Chrome 中的行为不同答案

【问题标题】：display:table-cell behaving differently in Firefox and Chromedisplay:table-cell 在 Firefox 和 Chrome 中的行为不同
【发布时间】：2012-09-25 07:15:57
【问题描述】：

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

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

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

【问题讨论】：

你有没有想过使用svg？除非您担心非现代浏览器，否则使用 html 会产生大量额外工作。
display:table; position: absolute 不能工作；它是一个或另一个（对于浏览器它将是 display:table）
@BoltClock 是的，先生！谢谢你让我明白这一点！

标签： html css cross-browser

【解决方案1】：

为了修复它：

申请display: table-row到.graph
在.series 上使用inline-block 而不是table-cell
避免使用疯狂的浮点数百分比（例如 14.2857%），因为浏览器的数学引擎几乎总是以不同的方式进行舍入。

【讨论】：

#3 是一个很好的观点。如果您想更进一步，您可以定义基于像素的长度，并为您自己和浏览器带来巨大的帮助。
轰隆隆！谢谢，佐尔坦。我在display:table-row; 上完全分开了。使用小浮点数（如 13.5%）作为宽度有什么害处，还是您根本不建议使用浮点数？我正在使用所有百分比，因为图表需要响应。由于它目前已设置，它应该根据容器按比例缩放。这是否可以原谅我这样做的方式，还是有更聪明的方式来做到这一点？
百分比是可以的，只要它们不能被不同的浏览器区别对待，所以尽量避免任何有小数部分的东西（例如 13.5%）。但是 14% 完全没问题

【解决方案2】：

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

【讨论】：