Using Flot with Bootstrap: IE8 incompatibility?

问题

I am trying to use Flot in a Bootstrap project. I am finding that in IE8, the Flot graph is invisible, and I've narrowed the problem down to the HTML5 shim used by Bootstrap.

Here is the page in full: it's the basic Flot example plus the HTML5 shim, and the graph is invisible in IE8 (it's fine in Chrome).

If I remove the HTML5 shim line, the graph is fine in IE8. However, I need the HTML5 shim for Bootstrap styles to work (when I add Bootstrap back in - I've removed references to it for the purposes of this example) - if it's not there then the Bootstrap styles go screwy.

What can I do?

<!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>

回答1:

html5shim and and excanvas somewhat do the same thing I'm guessing? excanvas emulates html5 canvas elements and html5shim does some other magic that I'm not too clear on. In short, you'll want to tell html5shim to knock it off when it comes to IE<9 and canvas elements. I dug around in the source a bit and found this information.

The html5 object is exposed so that more elements can be shived and existing shiving can be detected on iframes.
options can be changed before the script is included html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };

Soon after it lists all the elements that will be "shiv"d, so I came up with this as a solution:

<!--[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]-->

The giant list in elements I took out of the source as well, only removing canvas.

Apart from that, I used all of your example and it seemed to work fine.

回答2:

I've also run into a problem with bootstrap and flot in ie8, but couldn't entirely identify with the OP's question. Even though what resolved the problem for me is about the same as Ryley's answer, it took me an hour to understand what I needed to do to make it work.

Simple Solution:

Download excanvas.js (If it's not in your flot package.)
Add conditional comment before I load all other javascript files in the head tag:

Quite simple, but: I got on this track by debugging javascript in IE, with "break on error" activated. That got me the following error msg: 'window.G_vmlCanvasManager' is null or not an object . Googling that lead me to excanvas.js. And pronto, flot.js suddenly worked. I don't know if this has anything to do with HTML5shim, but it works... and is simpler than the answer Ryley proposes.

来源：https://stackoverflow.com/questions/10208062/using-flot-with-bootstrap-ie8-incompatibility

标签

jquery

css

internet-explorer

twitter-bootstrap

flot