El siguiente elemento:

<span>Test</span>

span {
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.15;
}

Tiene una altura de 19 px en Chrome y 21 px en Firefox (fiddle). Intenté aplicar todo tipo de restablecimientos / normalización de CSS, la altura sigue siendo diferente. El texto en sí se representa de manera idéntica, pero la altura del elemento está desactivada en 2 píxeles, lo que rompe mi diseño.

¿Alguna forma de arreglarlo sin usar elementos de bloque (en línea)?

0
riv 5 mar. 2018 a las 12:08

5 respuestas

La mejor respuesta

Utilizar esta :

span {
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.15;
  display: inline-block;
}

La diferencia se debe a la diferente representación de las fuentes en los navegadores.

1
Amir Hasanzade 5 mar. 2018 a las 09:18

Este es un problema bien conocido. Es causado por el hecho de que Firefox y Chrome usan diferentes motores de renderizado, Gecko y Webkit respectivamente. Lamentablemente, no hay una "mejor" forma de solucionarlo.

Puede encontrar algunas soluciones en esta respuesta y este.

0
Dryr 5 mar. 2018 a las 09:18

Debido a que span es un elemento en línea, debe volver a escribir su código de la siguiente manera:

document.querySelectorAll("span").forEach(el => {
  el.textContent = el.offsetHeight + "px";
});
span {
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.15;
  display: inline-block; /* Key line */
  vertical-align: top; /* It is recommended when using "display: inline-block"*/
}
<span>Test</span>
0
Okan Kocyigit 5 mar. 2018 a las 09:24

Sobre las diferencias de altura, el problema es que también ha agregado el tamaño de fuente, la familia y el alto de línea.

Entonces, debido a estas 3 cosas:

font-family: Verdana;
font-weight: bold;
line-height: 1.15;

Su tamaño de texto se hace más grande que 16px.

-1
KMG 5 mar. 2018 a las 09:15

La razón de ese comportamiento es que está utilizando un span que es un elemento en línea. No cambia la altura de su contenedor en función de la altura de la línea, sino en función de su elemento de bloque principal. Aparentemente, Chrome y Firefox tienen diferentes estilos predeterminados para eso.

Haga que span sea un elemento de bloque con display: block o reemplácelo con un elemento de bloque como div.

-1
str 5 mar. 2018 a las 09:16