顯示：表細胞在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

回答

相關問題