Question

I’m built a graph in Chrome which looks like this:

But in Firefox it looks like this:

I’m pretty sure the discrepancy is the result of display:table-cell getting handled differently in the two browsers. But I’m not sure how to fix it. I uploaded a live demo here so you can inspect the code.

Answer 1

In order to fix it:

1. Apply display: table-row to .graph
2. Use inline-block instead of table-cell on .series
3. Avoid using crazy float number percentage ( like 14.2857% ) because of the browsers’ math engines that almost always do the rounding in different ways.