显示：表细胞在Firefox和Chrome

行为不同，我内置在Chrome中的图形看起来像这样： enter image description here 显示：表细胞在Firefox和Chrome

，但在Firefox它看起来像这样： enter image description here

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

来源

2012-09-24 emersonthis

您是否想过使用[tag：svg]？除非您担心非现代浏览器，否则您会使用[tag：html]创建大量额外工作。 – Wex

'display：table;位置：绝对'不能工作;它是一个或另一个（它将为浏览器的“display：table”） – FelipeAls

@BoltClock YES SIR！谢谢你让我直说！ – emersonthis

为了解决这个问题：

用疯狂的浮点数个应用display: table-row到.graph
使用inline-block，而不是table-cell上.series
避免（如14.2857％），因为浏览器数学引擎几乎总是以不同的方式进行四舍五入。

来源

2012-09-24 21:43:01

＃3是一个伟大的观点。如果你想更进一步，你可以定义基于像素的长度，并为自己和浏览器一个很大的好处。 – Wex

BOOM！谢谢，佐尔坦。我完全隔开'display：table-row;'。使用小浮标（如13.5％）的宽度是否有任何伤害，还是您建议不使用浮标？我正在使用所有百分比，因为图需要有响应。按照目前的设置，它应该根据容器按比例放大。这是否是我的做法的原因，还是有更明智的做法呢？ – emersonthis

百分比是可以的，只要不能被不同的浏览器处理得很差，所以尽量避免使用小数部分（例如13.5％）。然而，14％完全可以 –

问题是在Firefox中的相对定位。改变.series的位置和其他一些更改，它就可以工作。在firefox中，由于相对定位，％宽度实际上是从外部分区计算百分比。

来源

2012-09-24 21:41:47 geekman

显示：表细胞在Firefox和Chrome

回答

相关问题