javascript - 条形图插件 - IE9-110 问题，图表在容器外扩展

Question

我制作了一个简单的条形图插件，它接受一些设置和数据并将其显示为百分比，它在除 IE9-10 之外的所有浏览器中都运行良好。

图表仍然显示正常，但一旦每个条形图都完成动画显示，表格似乎获得了额外的高度，就会出现奇怪的“跳跃”。我已经在运行良好的浏览器中测量了图表中条形的高度，并且在出现奇怪的“跳跃”效果的浏览器中似乎增加了大约 50 像素的高度。

这是相关的 CSS:

#barchart {
  text-align: center;
}

.bar {
  margin-right: 10px;
  position: relative;
  bottom: 0;
  overflow: hidden;
  padding-top: 50px;
  height: 100%;
}

.bar .label {
  text-align: center;
  width: inherit;
  margin: 0 auto 20px auto;
  width: 116px;
}

.bar__value {
  height: 0%;
  background-repeat: repeat-y;
  background-position: top center;
  margin: 0 5px;
}

这是 JS:

var Crafted = (function(c) {
  return c;
})(Crafted || {});

(function($, c) {

  c.BarChart = (function() {

    var barChart = function(target, options, data) {
      this.target = target;
      this.ChartItem(options);
      this.data = data;
      this.create();
    };

    barChart.prototype.ChartItem = function(options) {
      var settings = $.extend({
        width: '100%',
        height: '500px',
        usePercentSymbol: false,
        delay: 1000,
        animSpeed: 1000,
        chartImage: '',
        chartBgColour: '#CCCCCC'
      }, options);

      this.width = settings.width;
      this.height = settings.height;
      this.usePercentSymbol = settings.usePercentSymbol;
      this.delay = settings.delay;
      this.animSpeed = settings.animSpeed;
      this.chartImage = settings.chartImage;
      this.chartBgColour = settings.chartBgColour;
      return this;
    };

    barChart.prototype.create = function() {

      var _self = this;

      if (!_self.target) {
        console.error('Error: BarChart \'target\' must be specified');
        return;
      }

      if (!_self.data) {
        console.error('Error: BarChart \'data\' must be provided');
        return;
      }

      var $barChart = $('<table></table>').attr('id', 'barchart');
      var $charts = $('<tr></tr>').addClass('data-row');

      $charts.appendTo($barChart);
      $barChart.appendTo(_self.target);
      $barChart.attr('width', _self.width)
        .attr('height', _self.height);

      $.each(_self.data, function(index, value) {
        var $chart = $('<td></td>')
          .addClass('bar')
          .attr('valign', 'bottom')
          .attr('data-percent', value.percent);
        $chart.appendTo($charts);

        var $chartLabel = $('<div></div>').addClass('label');
        $chartLabel.appendTo($chart);

        var $chartValue = $('<div></div>').addClass('label__percent').text(_self.usePercentSymbol ? '0%' : 0);
        $chartValue.appendTo($chartLabel);

        var $chartTitle = $('<div></div>').addClass('label__title').text(value.label);
        $chartTitle.appendTo($chartLabel);

        var $barValue = $('<div></div>').addClass('bar__value');

        var barStyle = _self.chartImage ?
          'background-image:url(\'' + _self.chartImage + '\');' :
          'background-color:' + _self.chartBgColour

        $barValue.attr('style', barStyle);
        $barValue.appendTo($chart);
      });

      setTimeout(function() {
        $('.bar').each(function() {
          var percentage = $(this).attr('data-percent');
          var $percentLbl = $(this).find('.label__percent');

          $(this).children('.bar__value').animate({
            height: percentage + '%'
          }, _self.animSpeed);

          $({
            countNum: 0
          }).animate({
            countNum: percentage
          }, {
            duration: _self.animSpeed,
            easing: 'linear',
            progress: function() {
              var currentValue = Math.floor(this.countNum);
              $percentLbl.text(_self.usePercentSymbol ? currentValue + '%' : currentValue);
            }
          });
        });
      }, _self.delay);
    };

    return barChart;
  })();

})(jQuery, Crafted);

$(function() {
  (function(c) {
    var settings = {
      width: '800px',
      height: '400px',
      usePercentSymbol: true,
      delay: 200,
      animSpeed: 1000,
      chartImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/662693/chimney.svg'
    };

    var data = [{
      label: 'MANCHESTER',
      percent: 78
    }, {
      label: 'BIRMINGHAM',
      percent: 69
    }, {
      label: 'LONDON',
      percent: 94
    }, {
      label: 'CARDIFF',
      percent: 39
    }, {
      label: 'GLASGOW',
      percent: 54
    }, {
      label: 'BELFAST',
      percent: 35
    }]

    var barChart = new c.BarChart('#barChart', settings, data);

  })(Crafted);
});

我有一个 JsFiddle这说明了问题。如果您在 IE9/10 中加载它(您可以使用 IE 开发工具中的浏览器模拟器 - F12)，您将看到我所说的奇怪效果。这不会发生在 IE11/Edge 等...

可能是由于填充顶部应用于 <td>元素？这用于为每个图表标签提供足够的间距，以防止它们被切断。

Answer 1

尝试对 bar 类进行此 css 修改

.bar {
 margin-right: 10px;
 position: relative;  
 bottom: 0;
 overflow: hidden;
 padding-top: 50px;
 height: 75%;

似乎它可以在 ie9/10 和 chrome 上运行