html - display：table-cellはFirefoxとChromeで異なる動作をします

Question

Chromeで次のようなグラフを作成しました。

しかし、Firefoxでは次のようになります。

display:table-cell不一致は、2つのブラウザで異なる方法で処理された結果であると確信しています。しかし、私はそれを修正する方法がわかりません。コードを調べることができるように、ここにライブデモをアップロードしました。

Answer 1

それを修正するには：

1. に適用display: table-rowする.graph
2. inline-blockの代わりtable-cellに使用.series
3. ほとんどの場合、さまざまな方法で丸めを行うブラウザの数学エンジンがあるため、クレイジーな浮動小数点数のパーセンテージ（14.2857％など）の使用は避けてください。

Answer 2

問題は、Firefoxでの相対的な配置にあります。.seriesの位置を変更し、さらにいくつかの変更を加えると、機能します。Firefoxでは、相対的な位置付けのため、％widthは実際には外側の分割からパーセンテージを計算しています。