ChartJS v2.6.0在Internet Explorer中的意外行为

Question

im运行ChartJS v2.6以在Bootstrap网格中生成pieChart。一切在Chrome / Firefox / ..中都能正常显示，但在Internet Explorer中却无法正常显示，在Internet Explorer中，图表会在更大的屏幕尺寸上以意外方式拉伸。引导程序应注意调整大小。 我不知道为什么，所以我想在这里问是否有人可以。 这是CSS或ChartJS本身引起的问题，以及如何解决？

我将Web服务上传到VPS，因为它最初托管在受保护的环境中，所以请不要介意使用错误的证书。

https://116.203.26.254:8080/entry/5bebdf6d466f37f3000289e2

这是右侧包含Chart + Legend的元素

StateKey

这是生成图表的方式

    <div class="row" >
        <div id="charts" class="col-sm-7">
            <div id="chartWrapper" class="row">
                <canvas id="questionChart"></canvas>
            </div>
            <div class="col-12 correctAnswers" style="display: none"></div>

            <div class="col-12 answerTime">
                <div id="buttongrp"></div>
                <div id="answerCount"></div>
            </div>
        </div>

        <div id="legendContainer" class="col-sm-5">
            ....
        </div>
    </div>

这是缩放图表的CSS

            ctx = document.getElementById("questionChart");
            chart = new Chart(ctx, { //Die Optionen für das Diagramm unterscheiden sich wesentlich pro Fragetyp
                type: 'pie',
                data: {
                    labels: dataCountMap.keys(), //Generieren der Labels aus den Mapkeys
                    datasets: [{
                        label: '# of Votes',
                        data: dataCountMap.values(), //Generieren der Diagrammdaten aus den Mapvalues
                        backgroundColor: usedColors, // Zufällig gewählte Farben aus dem in dem Optionen definierten Array
                        hoverBackgroundColor: usedHoverColors
                    }]
                },
                options: {
                    aspectRatio: 1,
                    legend: {
                        display: false
                    },
                    showAllTooltips: true,
                    tooltips: {
                        callbacks: {
                            label: function (tooltipItem, data) {
                                var value = data.datasets[0].data[tooltipItem.index];
                                return value;
                            },
                            title: function (tooltipItem, data) {
                                return '';
                            }
                        },
                        tooltipTitleFontSize: 0,
                        bodyFontSize: 30,
                        displayColors: false,
                        xPadding: 10,
                        backgroundColor: '#323232'
                    }
                }
            });

这是在Chrome中：

这是在IE中：

谢谢

Answer 1

以下样式（在style.css中）引起了问题

@media and (min-width:1200px) {
    .pieChart {
        padding: 0px 11vw 0 11vw;
    }
}

请删除此样式，它将解决IE中的问题。