2009-06-22 12 views
3

Ich habe jQuery Sparkline (http://omnipotent.net/jquery.sparkline/) in einer Seite verwendet. Dies gibt mir ein Problem in IE, wenn der Container DIV nicht groß genug ist, um es zu zeigen, versuchte es mit Firefox/Chrome, es funktioniert gut. Siehe Beispielcode,Problem mit JQuery Sparkline in IE

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

Kann mir hier jemand helfen?

Danke, Manoj

+1

Was genau ist das Problem, das Sie mit IE konfrontiert sind? Ich kann es in Firefox 3.5RC2, Chrome und IE 8 und IE 7 (Emulation in IE8) mit ähnlichen Ergebnissen ausführen. – TheVillageIdiot

+0

das Diagramm wird über alles gezeichnet, berücksichtigt es nicht die Überlaufeigenschaft des enthaltenen div – Manoj

+0

Screenshots hier hinzugefügt http://download.yousendit.com/UmNJTkZyTEQ5NVVLSkE9PQ – Manoj

Antwort

2

Gareth Watt (http://omnipotent.net/jquery.sparkline/) hat mir geholfen, dieses Problem zu lösen, indem sie "position: relative" Zugabe zu dem Behälter div.

hier ist der Code

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

Es kann nur in IE7 reproduziert werden.

Dank