javascript - Charts showing on the same line in non-IE browsers, but on the next line on IE browsers

Question

Here is the exact code you can try for yourself:

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

When I render this in IE, each chart shows in a different line. When I render it in any other browser except for IE, charts show on the same line like in-line elements.

What is going on? What is the reason for this? Is there any fix ?

Answer 1

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

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

Answer 2

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

ps: SVG 在 IE 小于 8 时不能正常工作

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