2009-06-22 6 views
3

J'ai utilisé jQuery sparkline (http://omnipotent.net/jquery.sparkline/) dans une page. Cela me pose problème dans IE si le conteneur DIV n'est pas assez grand pour le montrer, essayé avec Firefox/Chrome, ça marche bien. Voir l'exemple de code,Problème avec JQuery Sparkline dans 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> 

Quelqu'un peut-il m'aider ici?

Merci, Manoj

+1

Quel est exactement le problème que vous rencontrez avec IE? Je suis capable de l'exécuter dans Firefox 3.5RC2, Chrome et IE 8 et IE 7 (émulation dans IE8) avec des résultats similaires. – TheVillageIdiot

+0

le tableau est dessiné au-dessus de tout, il ne considère pas la propriété de débordement de la div – Manoj

+0

capture d'écran ajoutée ici http://download.yousendit.com/UmNJTkZyTEQ5NVVLSkE9PQ – Manoj

Répondre

2

Gareth Watts (http://omnipotent.net/jquery.sparkline/) m'a aidé à résoudre ce problème en ajoutant "position: relative" au conteneur div.

ici est le 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> 

Il peut être reproduit que dans IE7.

Merci