【发布时间】：2013-03-24 18:00:58
【问题描述】：
以下是您可以自己尝试的确切代码：
http://bl.ocks.org/AndrewStaroscik/5232739
当我在 IE 中呈现它时，每个图表显示在不同的行中。 当我在除 IE 之外的任何其他浏览器中呈现它时，图表会像内联元素一样显示在同一行。
发生了什么事？这是什么原因？有什么解决办法吗？
【问题讨论】：
标签： javascript css svg d3.js
【发布时间】：2013-03-24 18:00:58
【问题描述】：
您的图表在我尝试过的所有浏览器（最新的 Chrome 26、最新的 Firefox 19 和 IE 9）中呈现为两行。
它们包含在宽度为 960 像素的 <iframe> 中。每个<svg> 图表的宽度为500px，所以如果没有某种浮动定位，它们当然不能并排显示。调整图表大小或使用 CSS 使它们重叠（或者，如果这不是目标，则使用 CSS 强制它们堆叠）。
【讨论】：
-
谢谢，你能给我看一个 CSS 的例子，我可以用它们来使它们重叠吗？
-
我同意 user113215。确保它们始终堆叠的一种方法是将它们中的每一个放入自己的 div 中
-
@BDotA “重叠”是什么意思？要将两个图表完全放在一起，您可以使用
position:absolute;top:0;left:0之类的东西。如果您希望两个图表并排（这将导致第二个图表的一部分溢出页面的右边缘并且不可见）将它们都放在<div>和width:1000px中。
对我来说都是以内联方式加载的原因？因为 SVG 具有由浏览器的 USER AGENT 关联的内联属性。我不确定您使用的是哪个 IE 浏览器，但我使用的是 IE 10.0、chrome 和 firefox 也是最新的。一切都显示它 INLINE 。
ps：SVG 在 IE 小于 8 时无法正常工作
FIX：尝试使用 CSS 减小 svg 的高度和宽度。由于某种原因，它可能会被推送到下一行。
【讨论】：
-
谢谢，我必须在 IE 7 和 IE 8 中测试...我使用的是 IE 8，因此我也使用 R2D3 项目，如果 IE 为 8+，它们使用相同的 D3，并且使用 Raphael 为 IE 7 和 8 渲染它：github.com/mhemesath/r2d3
-
但他们也提到拉斐尔是不一致的。它适用于某些而不适用于其他。这只是一个解决方案而不是修复。您应该让您的用户转移到 IE 9 。因为 IE 8 缺乏渲染一致性