jquery - 将 Flot 与 Bootstrap 一起使用 : IE8 incompatibility?

标签 jquery css internet-explorer twitter-bootstrap flot

我正在尝试使用 FlotBootstrap元素。我发现在 IE8 中,Flot 图是不可见的,我已将问题缩小到 HTML5 shim。由 Bootstrap 使用。

这是完整的页面:它是 basic Flot example加上 HTML5 shim,图表在 IE8 中是不可见的(在 Chrome 中很好)。

如果我删除 HTML5 填充线,该图在 IE8 中就没问题了。但是,我需要 Bootstrap 样式的 HTML5 shim 才能工作(当我重新添加 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>

最佳答案

我猜 html5shim 和 excanvas 在某种程度上做同样的事情? excanvas 模拟 html5 canvas 元素,而 html5shim 做了一些我不太清楚的其他魔法。简而言之,当涉及到 IE<9 和 canvas 元素时,您需要告诉 html5shim 取消它。我在 source 中四处挖掘有点,找到了这个信息。

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 };

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

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

关于jquery - 将 Flot 与 Bootstrap 一起使用 : IE8 incompatibility?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10208062/

相关文章:

jquery - Css 背景大小 100% 检测高度改变负绝对位置

jquery - 在小屏幕上以折叠方式显示 DIV 但在桌面上显示正常

javascript - 网页加载后立即将光标强制到输入框

javascript - 单击 div 以外的任何地方时隐藏 div

html - 在与上面相同的行中缩进输入文本

windows - 无法获取 Windows Internet Explorer 主窗口的句柄

javascript - 在不使用位置 :absolute 的情况下重叠 div

javascript - 垂直居中的 CSS3 方法

internet-explorer - IE9中的IE7/8模式与实际运行的IE7/8相比有多好

html - 溢出 css 在 ie 中工作但不在 firefox 中工作