Altura de SPAN en Firefox

Question

Usando CSS, estoy tratando de especificar la altura de una etiqueta SPAN en Firefox, pero simplemente no la acepta (IE lo hace, curiosamente).

Firefox acepta la altura si uso un DIV, pero el problema con el uso de un DIV es la ruptura de línea molesta que sigue, que no puedo tener en este caso en particular.

Intenté establecer el atributo de estilo CSS de:

display: inline

para el DIV, pero Firefox parece volver al comportamiento SPAN de todos modos, e ignora el atributo de altura una vez más.

Answer 1

<style>
#div1 { float:left; height:20px; width:20px; }
#div2 { float:left; height:30px; width:30px }
</style>

<div id="div1">FirstDiv</div>
<div id="div2">SecondDiv</div>

Mientras el contenedor de lo que contiene los divs 1 y 2 sea lo suficientemente ancho para que quepan, esto debería estar bien.

Answer 2

Puede configurar cualquier elemento para mostrar : inline-block para permitir que reciba una altura o un ancho. Esto también le permite aplicar cualquier otro "estilo de bloque". a un elemento.

Sin embargo, una cosa a tener en cuenta es que Firefox 2 no admite esta propiedad. Firefox 3 es el primer navegador basado en Mozilla que admite esta propiedad. Todos los demás navegadores admiten esta propiedad, incluido Internet Explorer.

Tenga en cuenta que inline-block no le permite establecer la alineación del texto dentro del elemento en Firefox si se ejecuta en modo peculiar. Todos los otros navegadores permiten esto por lo que yo sé. Si desea establecer la alineación de texto mientras se ejecuta en modo peculiaridades, deberá usar la propiedad -moz-inline-stack en lugar de inline-block . Tenga en cuenta que esta es una propiedad exclusiva de Mozilla, por lo que tendrá que hacer una detección del navegador para asegurarse de que solo Mozilla obtenga esto, mientras que otros navegadores obtienen el bloque en línea estándar.

Answer 3

Los elementos en línea no pueden tener alturas (ni anchuras) como esa. Los SPAN ya están display: inline de forma predeterminada. Internet Explorer es en realidad el navegador dañado en este caso.

Answer 4

Como lo está mostrando en línea, la altura debe establecerse a la altura de su atributo de altura de línea.

Dependiendo de cómo esté distribuido, siempre puede usar float: left o float: derecha en el span / div para evitar el salto de línea. Pero si lo quieres en el medio de una oración, esa opción está fuera.

Answer 5

El problema es que 'display: inline' no puede tener una altura asociada porque, al estar en línea, obtiene su altura desde su contenido. De todos modos, ¿cómo define la altura de un cuadro que se rompe al final de una línea?

Puede intentar establecer 'altura de línea' en su lugar, o si esto no funciona a su gusto, establezca un relleno:

/* makes the whole box higher by inserting a space between the border and the content */
padding: 0.5em 0;

Answer 6

Solo puede cambiar la altura (y el ancho) de un elemento span cuando se configura en display: block; . Esto es porque es un elemento en línea normalmente. div se establece en display: block; normalmente.

Una solución podría ser utilizar:

<div style="background: #f00;">
    Text <span style="padding: 14px 0 14px 0; background: #ff0;">wooo</span> text.
</div>

Answer 7

Para establecer la altura del intervalo, el siguiente debería funcionar en Firefox

span {
  display: block;
  height: 50px;
}

Answer 8

alineación de texto dentro del elemento que puede ajustar utilizando los atributos de relleno y bloque en línea. pantalla: bloque en línea; acolchado superior: 3px; por ejemplo

Answer 9

height en em = altura de línea relativa

por ejemplo height: 1.1em con line-height:1.1

= 100% llenado