Strange behavior Highcharts pie chart in document

问题:

I have 4 pie charts next to each other in a bootstrap grid which all show well in IE11 document modes IE5, IE7, IE9+, but not on IE8.

What it does in document mode IE8:

When I refresh the page with ctrl+f5: the charts show correct. When I refresh with f5: the charts have a way to big container and display out of screen (and way out of the grid)

My 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);
});

The 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>

And the 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;
}

Do I do something wrong or is this a bug? And will this occur in IE8 (actual browser)

回答1:

Use comments in HTML for IE8, like this:

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

回答2:

The bug didn't occur on IE8 running on Host OS Windows XP. Therefor the problem is actually non-existent. Another heads up that I should really test on actual IE8 and not the document modes.