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

预览http://www.dbnz.co.nz/2016-preview/

如果有人能提出更好的方法来做到这一点，那将是非常棒的。：）

Answer 1

我已经访问了Chrome和Firefox的页面，所有看起来都很好，尝试重新启动chrome以删除任何缓存的样式表，看看它是否有效。此外，如果是这种情况，您可能需要使用隐身模式或开发者模式来阻止缓存。

显示表格单元格无法在Chrome中使用

1 个答案: