Question

我正在尝试在Flot项目中使用Bootstrap。我发现在IE8中，Flot图是不可见的，我将问题缩小到Bootstrap使用的HTML5 shim。

这是完整的页面：它是basic Flot example加上HTML5垫片，图表在IE8中是不可见的（在Chrome中很好）。

如果删除HTML5填充线，IE8中的图表就可以了。但是，我需要用于Bootstrap样式的HTML5填充程序（当我添加Bootstrap时 - 为了本例的目的我已经删除了对它的引用） - 如果它不存在那么Bootstrap样式就变得棘手了。

我该怎么办？

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

Answer 1

html5shim和excanvas有点做我猜的同样的事情？ excanvas模仿html5画布元素，html5shim做了一些我不太清楚的魔法。简而言之，当谈到IE＆lt; 9和canvas元素时，你会想告诉html5shim。我在source挖了一下，发现了这个信息。

公开html5对象，以便可以更多元素可以在iframe上检测现有的shiving 可以在脚本之前更改选项包括 html5 = {'elements'：'mark section'，'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。

除此之外，我使用了你所有的例子，似乎工作正常。

Answer 2

我在ie8中遇到了bootstrap和flot的问题，但是无法完全识别OP的问题。虽然解决问题的方法与Ryley的答案大致相同，但我花了一个小时才明白我需要做些什么才能使它发挥作用。

简单解决方案：

Download excanvas.js（如果它不在您的flot包中。）
在我在head标记中加载所有其他javascript文件之前添加conditional comment：

非常简单，但是：我通过在IE中调试javascript来启动此轨道，并激活了“break on error”。这给我带来了以下错误信息：'window.G_vmlCanvasManager' is null or not an object。谷歌搜索引导我到excanvas.js。并且，flot.js突然起作用了。我不知道这是否与HTML5shim有任何关系，但它有效......并且比Ryley提出的答案更简单。

使用Flot和Bootstrap：IE8不兼容？

2 个答案: