Chrome和Firefox上的不同CSS結果

我擁有此書以及書籍和動畫作者姓名。 Theres大約35頁書在頁面上。Chrome和Firefox上的不同CSS結果

當您在鼠標上一本書，作者姓名淡入和下降緩慢。它在Chrome上看起來很完美，但在Mozilla上，名稱遠比應該更多。通過其他書籍部分。

我試了幾件事，但無法設法解決它。有人能幫我嗎？

這裏是我的CSS：

<style> 
#nav li.parent { 
    margin-left: 1px; 

    width: 740px; 
    height: 130px; 
    text-align: center; 
    border: 1px solid #000; 
    margin: 10px; 
    list-style: none; 
    font-family: Montserrat, sans-serif; 
    font-size: 24px; 
} 
/* Effect 9: second text and borders */ 
#nav li.parent a { 
    margin: 0 20px; 
    padding: 18px 20px; 
} 
#nav li.parent a::before, #nav li.parent a::after { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 1px; 
    background: #fff; 
    content:''; 
    opacity: 0.2; 
    -webkit-transition: opacity 0.3s, height 0.3s; 
    -moz-transition: opacity 0.3s, height 0.3s; 
    transition: opacity 0.3s, height 0.3s; 
} 
#nav li.parent a::after { 
    top: 100%; 
    opacity: 0; 
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 
    -moz-transition: -moz-transform 0.3s, opacity 0.3s; 
    transition: transform 0.3s, opacity 0.3s; 
    -webkit-transform: translateY(-10px); 
    -moz-transform: translateY(-10px); 
    transform: translateY(-10px); 
} 
#nav li.parent a span:first-child { 
    z-index: 2; 
    display: block; 
    font-weight: 300; 
} 
#nav li.parent a span:last-child { 
    z-index: 1; 
    display: block; 
    padding: 8px 0 0 0; 
    color: rgba(0, 0, 0, 0.4); 
    text-shadow: none; 
    text-transform: none; 
    font-style: italic; 
    font-size: 0.75em; 
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; 
    opacity: 0; 
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 
    -moz-transition: -moz-transform 0.3s, opacity 0.3s; 
    transition: transform 0.3s, opacity 0.3s; 
    -webkit-transform: translateY(-100%); 
    -moz-transform: translateY(0px); 
    transform: translateY(0px); 

} 
#nav li.parent a:hover::before, #nav li.parent a:focus::before { 
    height: 6px; 
} 
#nav li.parent a:hover::before, #nav li.parent a:hover::after, #nav li.parent a:focus::before, #nav li.parent a:focus::after { 
    opacity: 1; 
    -webkit-transform: translateY(0px); 

} 
#nav li.parent a:hover span:last-child, #nav li.parent a:focus span:last-child { 
    opacity: 1; 
    -webkit-transform: translateY(0%); 
    -moz-transform: translateY(0%); 
    transform: translateY(0%); 
} 
</style>

來源

2016-06-13 Burcak

內聯元素都沒有跨瀏覽器。在你的情況下考慮<span>和<a>。對這些元素使用display: block，或者如果您不需要那些元素，只需使用display: inline-block; vertical-align: top; 即可。

來源

2016-06-13 13:13:33 Lucian

也不要在同一元素中使用的頂部和底部邊緣。一些瀏覽器崩潰保證金，一些不會，所以它不會跨瀏覽器。在你的情況下'#nav li.parent'這個選擇器代替'margin：10px'，使用'margin：0 10px 10px;' – Lucian

lucian，你能幫我編輯嗎？謝謝 – Burcak

當然我會幫助你@Burcak你可以做小提琴嗎？ – Lucian

您只需在每個<a>標記中刪除類「text1」和「text2」之間的<br>標記。

HTML：

<span class="text1" style="color:#000;font-size:24px;">Bir Satanistin Anıları</span> 
     <span class="text2" style="color:#000;font-size:18px;">Hershel Smith</span>

來源

2016-06-13 13:50:11 rJ7

Chrome和Firefox上的不同CSS結果

回答

相關問題