Дисплей Table-Cell не работает в Chrome

Question

Я использую display:table-cell для равномерного размещения контента на странице, и он отлично работает в каждом браузере, кроме Google Chrome, что действительно странно!

Странно, что если я проверяю элемент и вручную добавляю display:block к родительскому, он исправляет себя. Кто-нибудь знает, почему это может произойти?

HTML

<section class="partner-brands wrapper"> 
    <h5><span>Proud Partners With</span></h5> 
    <a href="./rewards"><img src="images/smart-trade-logo.svg" width="218" height="50" alt="Smart Trade"></a> 
    <a href="http://www.collisionrepair.co.nz/" target="_blank"><img src="images/cra-logo.png" width="46" height="70" alt="Collision Repair Association"></a> 
    <a href="http://www.busandcoach.co.nz/" target="_blank"><img src="images/baca-logo.svg" width="212" height="70" alt="Bus & Coach Association"></a> 
    <a href="http://i-car.co.nz/" target="_blank"><img src="images/i-car-nz-logo.svg" width="162" height="70" alt="I-Car NZ"></a> 
</section> 

(S) CSS

.partner-brands { 
    margin-bottom: 25px; 
    h5 { 
     position: relative; 
     text-align: center; 
     font-style: italic; 
     margin-top: 0; 
     &:before { 
      content: ""; 
      display: block; 
      width: 100%; 
      height: 0px; 
      position: absolute; 
      top: 10px; 
      left: 0px; 
      border-top: 1px solid #7D7D7D; 
     } 
     span { 
      background: #FFFFFF; 
      text-transform: uppercase; 
      padding: 0 6px; 
      position: relative; 
      z-index: 2; 
     } 
    } 
    a { 
     display: table-cell; 
     width: 250px; 
     text-align: center; 
     vertical-align: middle; 
     -webkit-transition: all 0.5s ease; 
     -moz-transition: all 0.5s ease; 
     -o-transition: all 0.5s ease; 
     -ms-transition: all 0.5s ease; 
     transition: all 0.5s ease; 
     &:hover { 
      -webkit-transform: scale(1.1); 
      -moz-transform: scale(1.1); 
      -o-transform: scale(1.1); 
      -ms-transform: scale(1.1); 
      transform: scale(1.1); 
      -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2); 
      -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2); 
      box-shadow: 0px 3px 5px rgba(0,0,0,0.2); 
     } 
    } 
} 

FIREFOX SCREENSHOT

CHROME SCREENSHOT

Preview доступна на http://www.dbnz.co.nz/2016-preview/

Если бы кто-нибудь мог предложить лучший способ сделать это, это было бы потрясающе. :)

Answer 1

Я посетил страницу как с хромом, так и с Firefox, и все, кажется, попробуйте перезапустить хром, чтобы удалить любую кэшированную таблицу стилей и посмотреть, работает ли она. Также вы можете использовать режим инкогнито или разработчика, чтобы предотвратить кеширование, если это так.