爲什麼我的跨度在IE9中不顯示？

Question

即使內容模式設置爲IE Edge，我也無法在IE 9上顯示此跨度類別.time-name。

它在Firefox和Google上顯示，獨立於此處定義的任何JS庫或其他CSS類。

我已經有這個元標記：<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; 
}