Question

我正在尝试在Javascript / CSS中创建动画条形图。

它在Chrome，Firefox，Safari和移动设备上运行良好。但是，它在任何版本的IE中都不起作用（包括IE11，这真的很奇怪）。

我已尝试为每个条形图指定一个特定ID，并使用.getElementById和.getAttribute进行定位，但这不起作用。

从谷歌搜索，数据属性，.css（）和.animate（）应该在IE11中工作。关于错误的所有问题似乎都适用于旧版本。

我真的很感激额外的一双眼睛。

谢谢，

附上小提琴：http://jsfiddle.net/828s8Lvx/

我的代码如下：

HTML：

<div id="platform-chart">
    <ul class="bars">
      <li><div data-percentage="1.6" class="bar"></div><span>1</span></li>
      <li><div data-percentage="1.3" class="bar"></div><span>2</span></li>
      <li><div data-percentage="0.8" class="bar"></div><span>3</span></li>
      <li><div data-percentage="5.2" class="bar"></div><span>4</span></li>
      <li><div data-percentage="9.4" class="bar"></div><span>5</span></li>
      <li><div data-percentage="17.0" class="bar"></div><span>6</span></li>
      <li><div data-percentage="14.9" class="bar"></div><span>7</span></li>
      <li><div data-percentage="14.4" class="bar"></div><span>8</span></li>
      <li><div data-percentage="13.6" class="bar"></div><span>9</span></li>
      <li><div data-percentage="13.6" class="bar"></div><span>10</span></li>
      <li><div data-percentage="6.5" class="bar"></div><span>11</span></li>
      <li><div data-percentage="1.3" class="bar"></div><span>12</span></li>
      <li><div data-percentage="0.3" class="bar"></div><span>13</span></li>
    </ul>
  </div>

使用Javascript：

      $(".bars li div").each( function( key, bar ) {
        var self = this;
        setTimeout (function() {
          $(self).css({ 'opacity' : 1 });
          var percentage = ($(self).attr('data-percentage') * 3.8);
          $(self).animate({ 'height' : percentage + '%' }, 1500);
        }, key * 300);
      });

SASS：

#platform-chart {
position: relative;
left: 50%;

.bars {
  display: inline-block;
  height: 300px;
  width: 950px;

  li {
    display: table-cell;
    width: 100px;
    height: 300px;
    text-align: center;
    position: relative;

    .bar {
      position: absolute;
      bottom: 0;
      display: block;
      background: #f4804b; 
      width: 50px;
      margin-left: 20px;

      &:after {
        position: relative;
        bottom: 20px;
        color: #f4804b;
        content: attr(data-percentage) '%';
      }
    }

    span {
      position: absolute;
      color: #000;
      width: 100%;
      bottom: -2em; 
      left: 7px;
    }
  }
}

Answer 1

IE无法计算显示为table-cell的父元素的百分比高度。将其切换为inline-block将部分解决此问题。然后添加这个（尽管有点hacky）javascript来模拟table-cell的行为以使它们全部适合div

var totalItems = $(".bars li").length;
$(".bars li").width((100/totalItems)+'%');

数据属性在IE中不起作用

1 个答案: