Warum wird mein Bereich in IE9 nicht angezeigt?

Question

Ich kann diese Spannungsklasse .time-name auf IE 9 nicht angezeigt, auch mit Content-Modus auf IE Edge festgelegt.

Es wird in Firefox und Google unabhängig von einer JS-Bibliothek oder anderen hier definierten CSS-Klassen angezeigt.

Ich habe bereits dieses Meta-Tag in: <meta http-equiv="X-UA-Compatible" content="IE=edge"> und verwende Bootstrap.

Kann mir jemand helfen?

.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

Sie benötigen position: relative;

Demo hinzuzufügen: https://jsfiddle.net/qhpuxddx/1/

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