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

Question

我正在运行 ChartJS v2.6 以在引导网格中生成饼图。在 Chrome/Firefox/.. 中，一切都可以正常显示，但在 Internet Explorer 中则不然，在更大的屏幕尺寸上，图表会以意想不到的方式拉伸。Bootstrap 应该负责调整大小。我不知道为什么，所以我想在这里问是否有人可以。这是由 CSS 或 ChartJS 本身引起的问题吗？如何解决？

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

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

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

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

这就是图表的生成方式

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

这是 CSS 缩放图表

        @media (max-width: 575px) {
        .pieChart {
            padding: 0px 60px 20px 60px;
        }
        .barChart {
            margin: 0px;
            padding: 0px 40px 20px 40px;
        }
    }

    @media (min-width: 576px) and (max-width: 767px) {
        .pieChart {
            padding: 0px 20px 0px 20px;
        }
        .barChart {
            margin: 0px;
            padding: 0px 10px 0px 10px;
        }
    }

    @media (min-width: 768px) and (max-width: 860px) {
        .pieChart {
            padding: 0px 60px 0px 60px;
        }

        .barChart {
            margin: 0px;
            padding: 0px 20px 0px 20px;
        }
    }

    @media (min-width: 861px) and (max-width: 991px) {
        .pieChart {
            padding: 0px 85px 0px 85px;
        }

        .barChart {
            margin: 0px;
            padding: 0px 20px 0px 20px;
        }
    }

    @media (min-width: 992px) and (max-width: 1100px) {
        .pieChart {
            padding: 0px 110px 0px 110px;
        }
        .barChart {
            margin: 0px;
            padding: 0px 60px 0px 60px;
        }
    }

    @media (min-width: 1101px) and (max-width: 1199px) {
        .pieChart {
            padding: 0px 130px 0px 130px;
        }
        .barChart {
            margin: 0px;
            padding: 0px 60px 0px 60px;
        }
    }

这是在 Chrome 中：

这是在 IE 中：

谢谢

标签： cssbootstrap-4chart.js

Answer 1

以下样式（在 style.css 中）导致问题

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

请删除此样式，它将修复 IE 中的问题。