javascript - 为什么我的跨度没有显示在 IE9 中？

Question

我无法获取此跨度类 .time-name显示在 IE 9 上，即使内容模式设置为 IE Edge。

它独立于此处定义的任何 JS 库或其他 CSS 类在 Firefox 和 Google 上显示。

我已经有了这个元标记:<meta http-equiv="X-UA-Compatible" content="IE=edge">并且正在使用 Bootstrap。

谁能帮帮我？

.time-count-container {
  min-height: 300px;
  margin-top: 50px;
}

.time-box {
  width: 150px;
  height: 150px;
  display: table;
  border: 1px solid black;
  margin: 50px auto;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.time-box-inner {
  width: 150px;
  height: 150px;
  display: table;
  text-align: center;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.time-number {
  font-size: 65px;
  width: 100%;
  display: inline-block;
  font-weight: 300;
  padding-top: 15%;
  -webkit-transition: all .25s;
  -moz-transition: all .25s;
  -ms-transition: all .25s;
  -o-transition: all .25s;
  transition: all .25s;
}

.time-number .digit {
  line-height: 60px;
  display: inline-block;
  overflow: hidden;
}

.time-name {
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
  color: black;
}

<div id="time_countdown" class="time-count-container">
  <div class="col-sm-3">
    <div class="time-box">
      <div class="time-box-inner dash days_dash animated" data-animation="rollIn" data-animation-delay="300">
        <span class="time-number">
          <span class="digit">0</span>
          <span class="digit">0</span>
          <span class="digit">0</span>
        </span>
        <span class="time-name">Days</span>
      </div>
    </div>
  </div>

  <div class="col-sm-3">
    <div class="time-box">
      <div class="time-box-inner dash hours_dash animated" data-animation="rollIn" data-animation-delay="600">
        <span class="time-number">
          <span class="digit">0</span>
          <span class="digit">0</span>
        </span>
        <span class="time-name">Hours</span>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="time-box">
      <div class="time-box-inner dash minutes_dash animated" data-animation="rollIn" data-animation-delay="900">
        <span class="time-number">
          <span class="digit">0</span>
          <span class="digit">0</span>
        </span>
        <span class="time-name">Minutes</span>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="time-box">
      <div class="time-box-inner dash seconds_dash animated" data-animation="rollIn" data-animation-delay="1200">
        <span class="time-number">
          <span class="digit">0</span>
          <span class="digit">0</span>
        </span>
        <span class="time-name">Seconds</span>
      </div>
    </div>
  </div>
</div>

Answer 1

需要添加position: relative;

演示:https://jsfiddle.net/qhpuxddx/1/

.time-name {
  position: relative; <----- add this
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
  color: black;
}