本文介绍了使用Flot with Bootstrap:IE8不兼容?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在 / bootstrap /> Bootstrap 项目。我发现在IE8中,Flot图是不可见的,我已经将问题缩小到由Bootstrap使用。

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.

这是完整的网页:这是加上HTML5垫片,并且图表在IE8中是不可见的(在Chrome中很好)。

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).

如果我删除HTML5 shim行,图表在IE8是正常的。但是,我需要HTML5垫片的Bootstrap样式工作(当我添加Bootstrap - 我已经删除了它的引用为本示例的目的) - 如果它不是那里,那么Bootstrap风格是螺旋的。

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.

我该怎么办?

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


推荐答案

html5shim和和excanvas有些做同样的事情,猜猜? excanvas模拟html5 canvas元素和html5shim做一些其他魔法,我不太清楚。总之,你想要告诉html5shim,当它涉及到IE< 9和canvas元素时。我在中挖了一下,发现了这些信息。

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.

在列出所有将shivd的元素之后,作为解决方案:

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

元素中的巨大列表我也从源代码中删除,只删除 canvas

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.

这篇关于使用Flot with Bootstrap:IE8不兼容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 01:53