ChromeとFirefoxで異なるCSS結果

Question

私は本とアニメーション作家の名前を持つこのページを持っています。このページにある約35冊の書籍。

http://kutsalkitap.org/kaynaklar/

あなたが本の上にマウスを取得すると、作者の名前がフェードインし、ゆっくりと下がります。それはクロムには完璧に見えますが、モジラでは、名前はそれよりももっと下になります。他の書籍セクションを通過します。

私はいくつかのことを試みましたが、それを修正できませんでした。誰か助けてくれますか？

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

Answer 1

インライン要素は、クロスブラウザではありません。

は、ここに私のCSSです。あなたの場合は<span>と<a>と考えてください。それらの要素にはdisplay: blockを使用するか、ブロックする必要がない場合は、display: inline-block; vertical-align: top; を使用してください。

Answer 2

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