顯示錶格單元格在Chrome中不起作用

我使用display:table-cell將內容均勻地分佈在頁面上，並且在除Chrome瀏覽器之外的每個瀏覽器中都能正常工作，這非常奇怪！顯示錶格單元格在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

可在預覽

如果有人可以提出一個更好的方法來做到這一點，那也是非常棒的。 :)

來源

2015-11-06 dpDesignz

我已經訪問該頁面與鉻和Firefox和所有似乎都很好嘗試重新啓動鉻來刪除任何緩存樣式表，看看它是否工作。如果出現這種情況，您也可以使用隱身模式或開發者模式來防止緩存。

來源

2015-11-06 21:11:43 domii

真的嗎？頁腳上的4個標誌？我簡直就是在這臺電腦上安裝了Chrome瀏覽器來測試它，因爲客戶端提醒我他的電腦沒有工作。：/ – dpDesignz

我不得不再次嘗試，這兩個對我來說都是相同的，這裏是照片。你能指出不同之處嗎？ chrome：http：//s10.postimg.org/rz0kgjodl/chrome.png和firefox：http://s28.postimg.org/4ewl3oux9/firefox.png – domii

請看我的截圖嗎？ :)你是附加照片？ – dpDesignz

顯示錶格單元格在Chrome中不起作用

回答

相關問題