如何正确应用IE11 +的CSS hack

Question

我正在为我的Web应用程序创建一个加载微调器。它在chrome中工作得非常好，但在IE11中，CSS样式无效。

以下是我在https://codepen.io/creotip/pen/dfaIh?editors=1100#0中使用加载微调器的示例代码：

＆＃13;

＆＃13;

* {
  padding: 0px;
  margin: 0px;
}

body {
  overflow: hidden;
}

.page-bg {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: url('https://i.imgur.com/BlihuYt.jpg') center;
  -webkit-filter: blur(0px);
  z-index: 10;
}

.preloader {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8));
  z-index: 10;
}

.preloader>.preloader-box {
  position: absolute;
  width: 345px;
  height: 30px;
  top: 50%;
  left: 50%;
  margin: -15px 0 0 -150px;
  -webkit-perspective: 200px;
}

.preloader .preloader-box>div {
  position: relative;
  width: 30px;
  height: 30px;
  background: #CCC;
  float: left;
  text-align: center;
  line-height: 30px;
  font-family: Verdana;
  font-size: 20px;
  color: #FFF;
}

.preloader .preloader-box>div:nth-child(1) {
  background: #3366FF;
  margin-right: 15px;
  -webkit-animation: movement 600ms ease 0ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(2) {
  background: #3366FF;
  margin-right: 15px;
  -webkit-animation: movement 600ms ease 75ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(3) {
  background: #3366FF;
  margin-right: 15px;
  -webkit-animation: movement 600ms ease 150ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(4) {
  background: #3366FF;
  margin-right: 15px;
  -webkit-animation: movement 600ms ease 225ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(5) {
  background: #3366FF;
  margin-right: 15px;
  -webkit-animation: movement 600ms ease 300ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(6) {
  background: #3366FF;
  margin-right: 15px;
  -webkit-animation: movement 600ms ease 375ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(7) {
  background: #3366FF;
  margin-right: 15px;
  -webkit-animation: movement 600ms ease 450ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(8) {
  background: #3366FF;
  -webkit-animation: movement 600ms ease 525ms infinite alternate;
}

@-webkit-keyframes movement {
  from {
    -webkit-transform: scale(1.0) translateY(0px) rotateX(0deg);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  to {
    -webkit-transform: scale(1.5) translateY(-25px) rotateX(45deg);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.4);
    background: #3399FF;
  }
}

＆＃13;

<div class="page-bg"></div>

<div class="preloader">
  <div class="preloader-box">
    <div>L</div>
    <div>O</div>
    <div>A</div>
    <div>D</div>
    <div>I</div>
    <div>N</div>
    <div>G</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如何解决此问题并为IE11修复此问题？

Answer 1

您的代码有vendor prefixes

前缀-webkit将属性限制为由webkit engine

提供支持的浏览器

我从你的代码中删除了前缀，这对我来说在IE 11上工作

＆＃13;

＆＃13;

* {
  padding: 0px;
  margin: 0px;
}

body {
  overflow: hidden;
}

.page-bg {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: url('https://i.imgur.com/BlihuYt.jpg') center;
  -webkit-filter: blur(0px);
  z-index: 10;
}

.preloader {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: radial-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8));
  z-index: 10;
}

.preloader>.preloader-box {
  position: absolute;
  width: 345px;
  height: 30px;
  top: 50%;
  left: 50%;
  margin: -15px 0 0 -150px;
  perspective: 200px;
}

.preloader .preloader-box>div {
  position: relative;
  width: 30px;
  height: 30px;
  background: #CCC;
  float: left;
  text-align: center;
  line-height: 30px;
  font-family: Verdana;
  font-size: 20px;
  color: #FFF;
}

.preloader .preloader-box>div:nth-child(1) {
  background: #3366FF;
  margin-right: 15px;
  animation: movement 600ms ease 0ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(2) {
  background: #3366FF;
  margin-right: 15px;
  animation: movement 600ms ease 75ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(3) {
  background: #3366FF;
  margin-right: 15px;
  animation: movement 600ms ease 150ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(4) {
  background: #3366FF;
  margin-right: 15px;
  animation: movement 600ms ease 225ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(5) {
  background: #3366FF;
  margin-right: 15px;
  animation: movement 600ms ease 300ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(6) {
  background: #3366FF;
  margin-right: 15px;
  animation: movement 600ms ease 375ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(7) {
  background: #3366FF;
  margin-right: 15px;
  animation: movement 600ms ease 450ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(8) {
  background: #3366FF;
  animation: movement 600ms ease 525ms infinite alternate;
}

@keyframes movement {
  from {
    transform: scale(1.0) translateY(0px) rotateX(0deg);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  to {
    transform: scale(1.5) translateY(-25px) rotateX(45deg);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.4);
    background: #3399FF;
  }
}

＆＃13;

<div class="page-bg"></div>

<div class="preloader">
  <div class="preloader-box">
    <div>L</div>
    <div>O</div>
    <div>A</div>
    <div>D</div>
    <div>I</div>
    <div>N</div>
    <div>G</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;