Jquery 数据属性在IE中不起作用

我正在尝试用Javascript/CSS创建一个动画条形图

它在Chrome、Firefox、Safari和移动设备上都能完美工作。然而，它在IE的任何版本中都不起作用（包括IE11，这真的很奇怪）

我试着给每个条指定一个特定的ID，并使用.getElementById和.getAttribute来定位它，但没有成功

通过谷歌搜索，数据属性、.css（）和.animate（）应该可以在IE11中使用。所有关于bug的问题似乎都是针对旧版本的

我真的很想多看一双眼睛

谢谢,

小提琴附呈：

我的代码如下：

HTML:

SASS：

---

IE无法计算显示为

表格单元格的父元素的百分比高度。将其切换到
内联块
将部分解决此问题。然后添加这个javascript（尽管有点黑）来模拟table cell的行为，以便将它们全部放在div中

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

parseFloat（$（self）.attr（'data-percentage'））
默认情况下它是一个字符串。有一种可能性是，不那么糟糕的浏览器会自动转换，IE只是把它作为一个字符串留下，然后变得混乱。我没有链接来证明这一点，所以这只是一个理论，因为您强制LI元素显示为
表格单元格
，这意味着它们在IE中没有高度，并且将内部DIV设置为百分比高度不起作用，因为父元素没有高度。删除
表格单元格
的东西，找到一个更好的方法来获得你想要的布局。这里有一个有效的方法->谢谢，我没有意识到表格单元格在IE中是这样工作的。这真是太好了。我将ul切换为display:flex，将li切换为display:inline块（这似乎是唯一有效的方法）。现在它可以在Chrome、Firefox、IE等浏览器上运行，但在iOS上会中断。我们将尝试以这些设备为目标，并在JS中更改显示模式。JS似乎不起作用，但这是一个很好的建议，可以尝试通过JS而不是CSS获得想要的显示属性。将进行实验。上面提到的显示：flex的东西造成了超过其价值的麻烦（在Safari/iOS中中断）。切换到内联块并手动更改所有宽度。按回答做标记。谢谢JS工作正常。为了清楚起见，它应该在
.each（）
循环之外
      $(".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);
      });

#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;
    }
  }
} 

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