Flot with Bootstrap：IE8互換性がありませんか？

BootstrapプロジェクトでFlotを使用しようとしています。私はIE8でFlotグラフが見えなくなっていることを知り、問題をBootstrapが使用しているHTML5 shimに絞り込んだ。Flot with Bootstrap：IE8互換性がありませんか？

basic Flot exampleとHTML5 shimのページです。グラフはIE8では表示されません（Chromeでは問題ありません）。

HTML5シム行を削除した場合、グラフはIE8でも問題ありません。しかし、私はブートストラップスタイルを動作させるためにHTML5 shimが必要です（ブートストラップを追加すると、この例のために参照を削除しました）。そうでなければ、ブートストラップスタイルがうまくいきません。

どうすればよいですか？

<!DOCTYPE html><html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Flot Examples</title> 
    <!--[if lt IE 9]> 
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/scripts/plugins/excanvas.min.js"></script><![endif]--> 
    <script language="javascript" type="text/javascript" src="/scripts/jquery-1.7.1.min.js"></script> 
    <script language="javascript" type="text/javascript" src="/scripts/plugins/jquery.flot.js"></script> 
</head> 
<body> 
<div id="placeholder" style="width:100%;height:300px;"></div> 
<script type="text/javascript"> 
$(function() { 
    var d1 = []; 
    for (var i = 0; i < 14; i += 0.5) 
     d1.push([i, Math.sin(i)]); 
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; 
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; 
    $.plot($("#placeholder"), [ d1, d2, d3 ]); 
}); 
</script> 
</body> 
</html>

出典

2012-04-18 Richard

グラフはIE7と8で私にとってはうまくいきますが、どのシムがブートストラップに含まれているのか分かりません。あなたはシムとブートストラップを見て、デモを投稿できますか？ –

html5shimとexcanvasと同じことをやっていると思いますか？ excanvasはhtml5キャンバス要素をエミュレートし、html5shimは私があまり明確ではない他の魔法を実行します。要するに、IE < 9とキャンバス要素に関しては、html5shimにそれを打ち消すように伝えたいと思うでしょう。私はsourceで掘り起こし、この情報を見つけました。以上の要素がshivedすることができ、既存の shivingはインラインフレーム上で検出することができるように

html5オブジェクトが露出しています。スクリプトの前にオプションを変更することができます html5 = {'要素'： 'マークセクション'、 'shivCSS'：false、 'shivMethods'：false};
それは「SHIV」Dになり、すべての要素を示して間もなく

ので、私は解決策として、この思い付いた：

<!--[if lt IE 9]> 
    <script type="text/javascript"> 
    var html5 = { 'elements': 'abbr article aside audio bdi data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video' }; 
    </script> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->

私は、ソースの取り出した要素で巨大なリストよく、除外するのはcanvasだけです。

それ以外は、私はあなたのすべての例を使用しており、うまく動作しているようです。

出典

2012-04-18 16:04:06 Ryley

それは絶対に素晴らしいです、ありがとう！ – Richard

Richard＆Ryleyありがとうございました...私は同じ問題を抱えていました。このことは、私が疑っている多くのデバッグ時間を節約しました！ – randlet

あなたはこの答えのためにビールを受けなければなりません、あなたは一日のクレイジーなデバッグを完了します:) –

私はまた、ie8のブートストラップとフロートの問題に遭遇しましたが、OPの質問で完全に特定できませんでした。私の問題を解決したのはRyleyの答えとほぼ同じですが、それを動作させるためには何が必要かを理解するのに1時間かかりました。 

：

簡単な解決策：私は頭タグ内の他のすべてのJavaScriptファイルをロードする前に

Download excanvas.js（。それはあなたのFLOTパッケージにない場合）
はconditional commentを追加しますかなりシンプルですが、私はこのトラックにIEでjavascriptをデバッグして、エラー時ブレークを有効にしました。それは私に次のエラーメッセージを持っています：'window.G_vmlCanvasManager' is null or not an object。グーグルが私をexcanvas.jsに導いた。そしてすぐに、flot.jsが突然動いた。私はこれがHTML5shimと何か関係があるのかどうかわかりませんが、それはうまくいきます...そして、Ryleyが提案する答えより簡単です。

出典

2012-11-26 13:40:22

Flot with Bootstrap：IE8互換性がありませんか？

答えて

関連する問題