logo标签列表

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

htmlcsscross-browser
3
我在Chrome中制作了一个图表，看起来是这样的：enter image description here 但在Firefox中它看起来是这样的：enter image description here 我相信这种差异是因为两个浏览器中处理display:table-cell方式不同造成的。但我不确定该如何解决。我上传了一个实时演示here，以便您查看代码。
你有没有考虑使用 [tag:svg]？除非你担心非现代浏览器的问题，否则使用 [tag:html] 会增加很多额外的工作量。 - Wex
display:table; position: absolute 无法工作；它只能选其一（对于浏览器来说应该是 display:table）。 - FelipeAls
@BoltClock 是的先生！感谢您纠正我的错误！ - emersonthis
2个回答
7
为了解决这个问题：
  1. 将.graph应用display: table-row
  2. 在.series上使用inline-block代替table-cell
  3. 避免使用疯狂的浮点数百分比（如14.2857％），因为浏览器的数学引擎几乎总是以不同的方式四舍五入。
#3 是一个很好的观点。如果你想更进一步，你可以定义基于像素的长度，这样可以让自己和浏览器受益匪浅。 - Wex
BOOM！谢谢，Zoltan。我完全忘记了display:table-row;。使用小浮点数（如13.5%）作为宽度有什么危害，或者您建议根本不使用浮点数？我使用所有百分比是因为图表需要响应式设计。按照当前设置，它应该根据容器按比例缩放。这样做可以原谅吗，还是有更聪明的方法？ - emersonthis
1
只要不会被不同的浏览器以不同的方式对待，百分比就可以使用，因此尽量避免使用带有小数部分的内容（例如13.5%）。但是14%是完全可以接受的。 - Zoltan Toth
0
问题出在Firefox的相对定位上。改变.series的定位以及其他一些更改，就可以解决问题了。 在Firefox中，%width实际上是从外部元素计算百分比，因为使用了相对定位。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接