将 Flot 与 Bootstrap 一起使用：IE8 不兼容？

Posted 2023-03-06

技术标签:

【中文标题】将 Flot 与 Bootstrap 一起使用：IE8 不兼容？【英文标题】：Using Flot with Bootstrap: IE8 incompatibility? 【发布时间】：2012-04-29 18:52:04 【问题描述】：

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

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

如果我删除 HTML5 填充线，则该图在 IE8 中很好。但是，我需要 HTML5 shim 才能使 Bootstrap 样式正常工作（当我重新添加 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>

【问题讨论】：

该图在 IE7 和 8 中对我来说正常，但我不知道引导程序中包含哪个 shim。你能发布一个包含 shim 和 bootstrap 的演示来看看吗？ 【参考方案1】：

html5shim 和 excanvas 在某种程度上做同样的事情我猜？ excanvas 模拟 html5 画布元素，而 html5shim 还做了一些我不太清楚的其他魔法。简而言之，当涉及到 IEsource 里翻了一下，发现了这个信息。

html5 对象被暴露，这样更多的元素可以被 shived 和可以在 iframe 上检测到现有的 shiving。可以在脚本之前更改选项包括 html5 = '元素'：'标记部分'，'shivCSS'：假， 'shivMethods': 假 ;

在它列出所有将被“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。

除此之外，我使用了您的所有示例，并且它似乎工作正常。

【讨论】：

感谢 Richard 和 Ryley...我遇到了同样的问题，这为我节省了很多调试时间！你应该为这个答案喝一杯，你完成了一天的疯狂调试:)【参考方案2】：

我在 ie8 中也遇到了 bootstrap 和 flot 的问题，但不能完全认同 OP 的问题。尽管为我解决问题的方法与 Ryley 的答案大致相同，但我还是花了一个小时才明白我需要做些什么才能让它发挥作用。

简单的解决方案：

<!--[if IE 8]>
    <script src="@Url.Content("~/Scripts/canvas/excanvas.min.js")"      type="text/javascript"></script>
<[endif]-->

很简单，但是：我通过在 IE 中调试 javascript 进入了这条轨道，并激活了“错误中断”。这让我收到以下错误消息：'window.G_vmlCanvasManager' is null or not an object。谷歌搜索将我引向 excanvas.js。很快，flot.js 突然起作用了。我不知道这是否与 HTML5shim 有任何关系，但它有效......并且比 Ryley 提出的答案更简单。

【讨论】：

以上是关于将 Flot 与 Bootstrap 一起使用：IE8 不兼容？的主要内容，如果未能解决你的问题，请参考以下文章

如何将 Flot 与 AngularJS 集成？

将 Bootstrap 4 与 NuxtJS 一起使用

如何将 Bootstrap 5 与 Next.js 一起使用？

如何将 bootstrap 5 与 webpack 加载器一起使用？

将 React 与 Bootstrap 切换一起使用

我可以将 React Bootstrap 与 Next.js 一起使用吗？