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

Question

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

该图表仍然显示良好，但有一个奇怪的‘跳跃’，一旦每个条形图完成动画的地方，桌子似乎增加了额外的高度。我在浏览器中测量了图表中条形图的高度，在出现奇怪的“跳跃”效果的浏览器中，似乎增加了大约50px的高度。

下面是相关的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上都能工作。