Verschiedene CSS-Ergebnisse für Chrome und Firefox

Question

Ich habe diese Seite mit Namen von Büchern und animierten Autoren. Theres ungefähr 35 Bücher auf der Seite.

http://kutsalkitap.org/kaynaklar/

Wenn Sie die Maus auf ein Buch bekommen, Name des Autors blendet und geht langsam nach unten. Es sieht perfekt auf Chrom aus, aber auf Mozilla geht der Name weit nach unten, als es sein sollte. Geht durch die anderen Bücher.

Ich habe ein paar Dinge ausprobiert, konnte es aber nicht beheben. Kann mir jemand helfen?

Hier ist meine 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> 

Answer 1

Inline-Elemente sind nicht Cross-Browser. Betrachten Sie in Ihrem Fall <span> und <a>. Verwenden Sie für diese Elemente display: block oder wenn Sie diese nicht benötigen, verwenden Sie einfach display: inline-block; vertical-align: top; , die für Sie arbeiten sollte.

Answer 2

Sie entfernen nur das <br> Tag zwischen den Klassen "text1" und "text2" in jedem <a> Tag.

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>