Comportement étrange Highcharts camembert en mode document IE8

J’ai 4 diagrammes à secteurs l’un à côté de l’autre dans une grid d’amorçage qui s’affichent bien dans les modes de document IE11 IE5, IE7, IE9 +, mais pas sur IE8.

Que fait-il en mode document IE8:

Lorsque j’actualise la page avec ctrl + f5: les graphiques montrent correctement. Quand j’actualise avec f5: les graphiques ont un moyen de gros conteneur et s’affichent en dehors de l’écran (et hors de la grid)

Mon JS:

$(function () { var chart; var options = { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, height: 200 }, legend: { align: 'right', verticalAlign: 'top', x: 0, y: 40, layout: 'vertical' }, credits: { enabled: false }, title: { margin: 30, style: { color: '#6e685c', fontSize: '10px' } }, tooltip: { pointFormat: 'Aantal: {point.y}' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', size:'100%', dataLabels: { enabled: true, color: '#454545', format: '{point.y}', distance: 10 } } } } $(document).ready(function () { // Build the chart options.title.text = 'Financieel fout'; options.series = [{ type: 'pie', name: 'Kwaliteit', data: [{ name: 'Goed', color: '#93ab48', y: 3 }, { name: 'Fout', color: '#ac4742', y: 3 }, { name: 'Onzeker', color: '#e09647', y: 1 }] }]; $('#graph-1').highcharts(options); // Build the chart options.title.text = 'Financieel onzeker'; options.series = [{ type: 'pie', name: 'Kwaliteit', data: [{ name: 'Goed', color: '#93ab48', y: 3 },{ name: 'Fout', color: '#ac4742', y: 1 }] }]; $('#graph-2').highcharts(options); // Build the chart options.title.text = 'Service desk'; options.series = [{ type: 'pie', name: 'Kwaliteit', data: [{ name: 'Goed', color: '#93ab48', y: 3 }, { name: 'Fout', color: '#ac4742', y: 3 }, { name: 'Onzeker', color: '#e09647', y: 1 }] }]; $('#graph-3').highcharts(options); // Build the chart options.title.text = 'Controle'; options.series = [{ type: 'pie', name: 'Kwaliteit', data: [{ name: 'Goed', color: '#93ab48', y: 3 },{ name: 'Fout', color: '#ac4742', y: 1 }] }]; $('#graph-4').highcharts(options); }); $("body").width($("body").width()-200).delay(1000).width($("body").width()+200); }); 

Le HTML:

 

Rechtmatigheid

Kwaliteit

Workload

Et le CSS

 /***************************************************************/ /* GRAPHS */ /***************************************************************/ .graph-container{ } .graph-container.border-right{ border-right: 1px solid #e5e5e5; } .graph-container .graphs-info{ margin: 20px 0px; } .graphs-info{ color: #6e685c; line-height: 26px; } .graphs-info .content-title{ font-size: 17px; font-weight: bold; display: block; margin-bottom: 20px; } .graphs-info .graphs-info-title{ display: inline-block; margin-right: 6px; } .graphs-info .error{ color: #830020; } .padding-left{ padding-left: 20px !important; } 

Est-ce que je fais quelque chose de mal ou est-ce un bug? Et cela se produira dans IE8 (navigateur actuel)

Utilisez les commentaires en HTML pour IE8, comme ceci:

  

Le bogue ne s’est pas produit sur IE8 sous Host OS Windows XP. Le problème est donc inexistant. Une autre tête que je devrais vraiment tester sur IE8 et non sur les modes de document.