Question

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

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

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

任何人都可以帮助我吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: