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结果

回答

相关问题