奇怪的行爲文件模式下的Highcharts餅圖IE8

我有一個彼此相鄰的4個餅圖，它們都在IE11，IE7，IE9，IE9文檔模式下都很好地顯示，但在IE8上沒有。奇怪的行爲文件模式下的Highcharts餅圖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: <b>{point.y}</b>' 
      }, 
      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：

<div class="row"> 
    <div class="col-md-6 graph-container border-right"> 
     <h4>Rechtmatigheid</h4> 
     <div class="clearfix"> 
      <div id="graph-1" class="col-md-6 no-horizontal-padding"></div> 
      <div id="graph-2" class="col-md-6 no-horizontal-padding border-right"></div> 
     </div> 
    </div> 
    <div class="col-md-3 graph-container border-right no-horizontal-padding"> 
     <h4 class="padding-left">Kwaliteit</h4> 
     <div class="graph-container"> 
      <div id="graph-3" class=""></div> 
     </div> 
    </div> 

    <div class="col-md-3 graph-container no-horizontal-padding"> 
     <h4 class="padding-left">Workload</h4> 
     <div class="graph-container"> 
      <div id="graph-4" class="no-horizontal-padding"></div> 
     </div> 
    </div> 
</div>

和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（實際瀏覽器）的HTML

來源

2014-02-06 Bart Burg

任何現場演示？沒有引導它能正常工作？ –

我不能給你現場演示，但它也沒有引導出錯。 –

我有一個可測試的現場演示：http://ic.develop.raakict.nl/ –

的錯誤並沒有對主機操作系統Windows XP上運行IE8發生。因此，問題實際上是不存在的。另一個問題是我應該真正測試實際的IE8而不是文檔模式。

來源

2014-02-20 13:53:48

使用註釋爲IE8，像這樣：

<!--[if IE 8]> 
<style>...</style> 
<![endif]-->

來源

2014-02-06 12:37:57 Sandy

你有什麼建議我用它做？它根本就不是自己的解決方案。 –

奇怪的行爲文件模式下的Highcharts餅圖IE8

回答

相關問題