CSS drop cap Firefox ve Safari'de farklı görüntüler. Bunun için nasıl ayarlarım?

Question

Blog yayınlarımdaki tüm kapakların aynı tarayıcıda görüntülenmesini sağlamaya yardımcı olmak için doğru CSS kombinasyonunu bulmaya çalışıyorum. Öncelikle Safari'yi kullanıyorum ve tasarım işimi orada yapıyorum. Safari'de nasıl işlediğim benim tercihim.

Firefox'ta, alt kapak düşük kalıyor ve metin mektubun etrafına sarmıyor. Negatif bir alt marj ekledim ve şimdi metin sarar. Ama hala çok düşük asılı. Bunu tutarlı bir şekilde istiyorum.

Bunu düzeltmek için ne yapabilirim? Teşekkür ederim.

This is my website here.

Answer 1

Damla Cap oluşturun: sola paragraf ilk karakteri Float.

.firstcharacter { 
 
    float: left; 
 
    color: #903; 
 
    font-size: 75px; 
 
    line-height: 60px; 
 
    padding-top: 4px; 
 
    padding-right: 8px; 
 
    padding-left: 3px; 
 
    font-family: Georgia; 
 
}

<p> 
 
    <span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices 
 
    molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu. 
 
</p>