在文档模式IE8中的奇怪行为高级图表饼图

Question

我在一个引导网格中有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: <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 (实际浏览器)中吗？

Answer 1

在主机操作系统Windows上运行的IE8上没有出现此错误。因此，问题实际上是不存在的。另一个提示是，我应该在实际的IE8而不是文档模式上进行真正的测试。