图表显示在非IE浏览器的同一行，但在IE浏览器的下一行

Question

以下是您可以自己尝试的确切代码：

http://bl.ocks.org/AndrewStaroscik/5232739

当我在IE中渲染时，每个图表显示在不同的行中。 当我在除IE之外的任何其他浏览器中呈现它时，图表显示在同一行上，如内联元素。

发生了什么事？这是什么原因？有什么问题吗？

Answer 1

在我尝试的所有浏览器中，您的图表在两行中呈现（最新的Chrome 26，最新的Firefox 19和IE 9）。

它们包含在宽度为960px的<iframe>中。每个<svg>图表的宽度为500px，因此当然没有浮动的某种定位，它们不能并排显示。调整图表大小或使用CSS使它们重叠（或者，如果这不是目标，则使用CSS强制它们堆叠）。

Answer 2

对我来说，所有人都是以内联方式加载的原因？因为SVG具有由浏览器的USER AGENT关联的内联属性。我不确定您使用的IE浏览器，但我使用的是IE 10.0，Chrome和Firefox也是最新的。一切都显示为INLINE。

ps：对于小于8的IE

，SVG无法正常工作

FIX：尝试使用CSS减少svg的高度和宽度。由于某种原因，它可能被推到下一行。