如何为 IE11+ 正确应用 CSS hack

Question

我正在为我的 Web 应用程序创建加载微调器。它在 chrome 中工作得很好，但在 IE11 中 CSS 样式不起作用。

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

* {
  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;
  }
}

<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>

我该如何解决这个问题并为 IE11 修复这个问题？

Answer 1

您的代码有 vendor prefixes

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

支持的浏览器

我从你的代码中删除了前缀，这在 IE 11 上对我有用

* {
  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;
  }
}

<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>

如何为 IE11+ 正确应用 CSS hack

How to properly apply a CSS hack for IE11+

html

css

google-chrome

spinner

internet-explorer-11