Ficou ruim no firefox

Bom dia Cristiano, tudo bem 8D

Cada navegador tem o seu próprio tipo de leitura padrão, e isso acaba diferenciando um pouco o tamanho das fontes e dimensões, principalmente usando o formato .em

Existem duas coisas que podem ser feitas a depender do que você esta trabalhando:

1º - você pode especificar via código qual navegador vai entender aquela linha de código e qual não vai, um exemplo é o efeito de transform pelo css, você pode fazer isso

-> -moz-transform
-> -webkit-transform

- Com isso você identifica que o mozilla vai ler a linha escrita -moz- e o chrome vai ler a linha escrita -webkit-

2º - você pode setar um tamanho de fonte basico para o corpo do site, assim qualquer navegador tem que entender da mesma formas as dimensões. Por exemplo:

body{
    font-size: 64,5%;
}

- Assim a fonte do corpo vai ter esta referencia sempre e as dimensões em serão sempre as mesmas.

São algumas saidas e tudo depende do projeto, neste caso acredito que definindo o tamanho da fonte na tag body deve solucionar o problema.

Caso não de certo comente aqui novamente para acharmos a solução blz ^^

Um abraço e bons estudos.

Luiz,

Obrigado pela resposta.

Infelizmente nenhuma dica surtiu efeito.

Eu percebi que o problema é o float: left;. Ele achata o top e o bottom do padding na first-letter. Se eu mudo para float:none; não achata.

Em compensação para de ocupar duas linhas no Firefox.

E pelo que vi não existe um -moz-padding para definir um padding diferenciado para o Firefox.

Bom dia, Cristiano ^^

Sim, esqueci de comentar que o -moz- e o -webkit- são para algumas propriedades específicas, admito que não sabia se isto poderia ser usado em propriedades padrões como o padding.

Será que tem como você postar um print com esta diferença pra eu dar uma olhada.

Muitas vezes o padding do float acaba alterando por que o objeto se torna flutuante, mas hoje em dia existem algumas maneiras de permitir que a letra ocupe duas linhas sem o float, seria legal tentar fazer alguns testes usando o propriedade display: inline ou até mesmo propriedade flex.

Se tiver como postar uma imagem talvez eu consiga ter uma ideia melhor. 8D

Mas este é um problema que podemos achar a solução ^^

um abraço.

Luiz,

é disso que estou falando:

obs.: entenda no Firefox: "com padding top e bottom igual a zero definido pelo navegador"

fonte: https://ibb.co/6vPjK9z

Bom dia Cristiano, agora eu entendi melhor.

Cara essa me pegou xD. É uma situação complicada mesmo.

Existe um estudo e testes bem aprofundados para isso. O que acontece.

O motor de render o firefox é diferente do motor de render do google chrome, e ambos identificam propriedades diferentes para o pseudo-elemento first-letter. Enquanto um utiliza de uma leitura baseada no css2 o outro utiliza uma baseada no css3 e isso diferencia completamente o bloco e seus espaçamentos.

Blz após entender isso, como podemos resolver? Temos duas soluções que são consideradas hacks mas não existe problema em utiliza-las.

1º - No código que você vai montar no pseudo-elemento first-letter você tem que especificar os espaçamentos e tamanhos da fonte de uma forma que tanto o mozila quanto o google chrome fiquem semelhantes em espaçamento, o mozila não identifica a propriedade line-height, então esta propriedade é a principal para deixar os dois layouts semelhantes. Depois de vários testes feitos pela pesquisadora Laura Franz’s ela chegou a esta linha de código para deixar o first-letter o mais próximo possível em todos os browser:

p.texto:first-letter{
        font-size:350%;
    margin:11px 0 -5px 0;
    padding:0 .1em 0 0;
    height:.7em;
    line-height:.65em;
    float:left;
    color:#333;
    *line-height:1em; /* IE7 Only */
        }

Nesta bloco de código estamos especificando:

• Um tamanho fixo da fonte 350% (com referencia ao tamanho da fonte especificado para classe ".texto")

• Uma altura para o bloco, que vai ser identificado pelo chrome e não pelo firefox.

• Uma margin negativa que vai ser identificada pelos dois browsers.

• E o line-height negativo para compensar o espaçamento existente na altura total da letra e vai ser interpretada apenas pelo chrome.

• A linha com asterisco é para criar uma interpretação única para o internet explorer tradicional já que o motor de render dele é diferente de todos, mas o explorer edge utiliza o mesmo motor do chrome.

Assim você consegue deixar o layout beeeeeeem semelhante em ambos os browsers, essa foi a saida um.

2º - você pode em vez de utlilzar o pseudo-elemento, criar um span em todas as primeiras letras do texto para gerar este efeito, com o span a identificação de um bloco com as mesmas propriedades de margin e padding é identica para cada browser, a desvantagem é ter que colocar a tag no inicio de todos os textos do site, exemplo:

-------CSS-----------------
span.primeira-letra{
            font-size:4em;
            float:left;
            background:#333;
            color:#fff;
            line-height:1.5em;
            padding:10px;
            margin:0px 15px 5px 0px;
        }

-------HTML----------------------
<p class="texto"><span class="primeira-letra">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus recusandae tempora assumenda perferendis sed accusantium cumque ea, praesentium blanditiis porro dolores velit molestias, officia voluptates, minus inventore suscipit vitae sequi perspiciatis nulla vero quas fugit. Voluptates itaque recusandae, accusamus vero id maiores facilis repudiandae cum optio aliquid, voluptatem a sint!praesentium blanditiis porro dolores velit molestias, officia voluptates, minus inventore suscipit vitae sequi perspiciatis nulla vero quas fugit. Voluptates itaque recusandae,</p>

Essas são as duas saídas para o seu problema, e com certeza gera problemas para muitas outras pessoas.

Perdão o texto enorme, ^^ mas precisava de uma explicação mais detalhada sobre o que esta acontecendo.

Quando der faça o teste, veja se funciona, eu fiz os testes por aqui e deu certo.

Um grande abraço e sempre que precisar estaremos aqui para auxiliar, bons estudos 8D

Luiz,

muito obrigado!

Testei o primeiro código que você passou e, confesso, já estava desistindo. O código gerou um visual bem ruim. Ficou igual nos dois, mas ocupando só uma linha. Já estava pensando que a solução da Laura era manter em uma linha só.

Então resolvi mexer nos padding e margin e consegui um ajuste que ficou igual nos dois e bem próximo do original:

    float:left;
    color:#FFF;
    background-color: #666;
    font-size:2em;
    margin:1px .1em -5px 0;
    padding:.3em;
    height:.65em;
    border-radius: 5px;

Retirei o line-height porque não fez nenhuma diferença em 4 navegadores testados (ie11, edge 44, chrome 75 e firefox esr 60).

Obrigado!

8D, que bom que conseguiu, realmente o estudo dela foi feito talvez em versões anteriores, mas mesmo assim ajudou bastante.

São nuancias muito pequenas que os navegadores identificam isso as vezes dificulta muito nosso lado xD.

Mas fico feliz que tenhamos conseguido solucionar.

Um abraço