奇怪的行为在文档模式IE8中Highcharts饼图

我在引导网格中有4个彼此相邻的饼图,这些饼图在IE11文档模式IE5,IE7,IE9 +中都很好,但在IE8上却没有。

它在文档模式IE8中的作用:

当我用ctrl + f5刷新页面时:图表显示正确。 当我用f5刷新时:图表有一个大容器的方式并显示在屏幕外(并且离开网格)

我的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); }); 

HTML:

 

Rechtmatigheid

Kwaliteit

Workload

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

我做错了什么或这是一个错误? 这将发生在IE8(实际浏览器)

在IE8中使用HTML注释,如下所示:

  

在Host OS Windows XP上运行的IE8上没有发生该错误。 因此问题实际上是不存在的。 另一个人认为我应该真正测试实际的IE8,而不是文档模式。