自分で試すことができる正確なコードは次のとおりです。
http://bl.ocks.org/AndrewStaroscik/5232739
これをIEでレンダリングすると、各グラフが異なる線で表示されます。IE以外のブラウザでレンダリングすると、チャートはインライン要素のように同じ線上に表示されます。
何が起こっている?これの理由は何ですか?修正はありますか?
自分で試すことができる正確なコードは次のとおりです。
http://bl.ocks.org/AndrewStaroscik/5232739
これをIEでレンダリングすると、各グラフが異なる線で表示されます。IE以外のブラウザでレンダリングすると、チャートはインライン要素のように同じ線上に表示されます。
何が起こっている?これの理由は何ですか?修正はありますか?
グラフは、私が試したすべてのブラウザー(最新のChrome 26、最新のFirefox 19、およびIE 9)で2行でレンダリングされます。
それらは<iframe>
、幅が960pxのに含まれています。各<svg>
チャートの幅は500pxなので、もちろん、何らかのフローティングの配置がないと、並べて表示することはできません。グラフのサイズを変更するか、CSSを使用してグラフをオーバーラップさせます(または、それが目標でない場合は、CSSを使用してグラフを強制的にスタックします)。
私にとって、すべてがインラインでロードされている理由は?SVGには、ブラウザのユーザーエージェントによって関連付けられたインラインプロパティがあるためです。どのIEブラウザを使用したかわかりませんが、IE 10.0、chrome、firefoxも最新のものを使用しています。すべてがインラインで表示します。
ps:SVGは8未満のIEでは正しく機能しません
修正:CSSを使用してsvgの高さと幅を減らしてみてください。なんらかの理由で次の行にプッシュされる可能性があります。