用于Featherlight灯箱的CSS加载微调器在IE中不起作用

Question

我已经实施了一个羽毛灯箱来显示有效的警报;我试图包含一个加载微调器，但我有几个问题：

1）尽管没有使用任何不兼容的方法，微调器在IE中没有动画

2）圆圈显示为椭圆形，尽管高度和宽度相等

JSFiddle：http://jsfiddle.net/JNsu6/15/

在官方网站上推荐使用此CSS： https://github.com/noelboss/featherlight/wiki/Add-a-CSS-Only-Loader

@-webkit-keyframes featherlightLoader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes featherlightLoader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.featherlight-loading .featherlight-content {
  -webkit-animation: featherlightLoader 1s infinite linear;
          animation: featherlightLoader 1s infinite linear;
  background: transparent;
  border: 8px solid #8f8f8f;
  border-left-color: #fff;
  border-radius: 80px;
  width: 80px;
  height: 80px;
  min-width: 0;
}

.featherlight-loading .featherlight-content > * {
  display: none !important;
}

.featherlight-loading .featherlight-close,
.featherlight-loading .featherlight-inner {
  display: none;
}

IE兼容性是必需的，所以如果有人可以告诉我如何使用featherlight加载类简单地显示加载GIF，那将是值得赞赏的。