数据属性在 IE 中不起作用

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来模拟表格单元格的行为以将它们全部放入div中

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