IE 中的 JQuery Sparkline 问题答案

【问题标题】：Issue with JQuery Sparkline in IEIE 中的 JQuery Sparkline 问题
【发布时间】：2009-06-22 07:32:14
【问题描述】：

我在页面中使用了 jQuery 迷你图 (http://omnipotent.net/jquery.sparkline/)。如果容器 DIV 不足以显示它，这会给我在 IE 中带来问题，尝试使用 Firefox/Chrome，它工作正常。查看示例代码，

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="jquery-1.3.1.js"></script>
    <script type="text/javascript" src="jquery.sparkline.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var myvalues = [10,8,5,7,4,4,1];
        $('.dynamicsparkline').sparkline(myvalues, {height:'100px',width:'300px'});
    });
    </script>
</head>
<body>
<div style="height:100px;width:400px;overflow:auto;border:1px solid black">
          Testing Header
          <br/>
          <span class="dynamicsparkline">Loading..</span>
          <br/>
          Testing Footer
</body>
</html>

有人可以帮我吗？

谢谢，马诺吉

【问题讨论】：

您在使用 IE 时遇到的具体问题是什么？我可以在 Firefox 3.5RC2、Chrome 和 IE 8 和 IE 7（IE8 中的仿真）中运行它，结果相似。
图表绘制在一切之上，没有考虑包含div的溢出属性
这里添加了屏幕截图download.yousendit.com/UmNJTkZyTEQ5NVVLSkE9PQ
我用的是 IE7，用 IE8 检查过，它可以工作，但不是在兼容模式下。

标签： javascript jquery internet-explorer jquery-plugins

【解决方案1】：

Gareth Watts(http://omnipotent.net/jquery.sparkline/) 通过在容器 div 中添加“position:relative”帮助我解决了这个问题。

这里是代码

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="jquery-1.3.1.js"></script>
    <script type="text/javascript" src="jquery.sparkline.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var myvalues = [10,8,5,7,4,4,1];
        $('.dynamicsparkline').sparkline(myvalues, {height:'100px',width:'300px'});
    });
    </script>
</head>
<body>
<div style="height:100px;width:400px;overflow:auto;border:1px solid black;position: relative">
          Testing Header
          <br/>
          <span class="dynamicsparkline">Loading..</span>
          <br/>
          Testing Footer
</div>
</body>
</html>

只能在IE7中重现。

谢谢

【讨论】：