css - style - Altura de SPAN en Firefox

span style en html

Question

Al usar CSS, intento especificar el alto de una etiqueta SPAN en Firefox, pero simplemente no la estoy aceptando (IE lo hace, curiosamente).

Firefox acepta la altura si uso un DIV, pero el problema con el uso de un DIV es el molesto salto de línea después de él, que no puedo tener en esta instancia en particular.

Intenté configurar el atributo de estilo CSS de:

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

Answer 1

Como lo muestra 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 puedes usar float: left o float: right en span / div para evitar el salto de línea. Pero si lo quiere en el medio de una oración, esa opción está fuera.

Answer 2

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

Puede intentar establecer ''line-height'' en su lugar, o si esto no funciona para su satisfacción, establezca un relleno:

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

Answer 3

Los elementos en línea no pueden tener alturas (ni anchuras) así. Los SPAN ya se display: inline por defecto. Internet Explorer es en realidad el navegador roto en este caso.

Answer 4

Solo puede cambiar la altura (y el ancho) de un elemento span cuando está configurado para display: block; . Esto se debe a que es un elemento en línea normalmente. div está configurado para display: block; normalmente.

Una solución podría ser usar:

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

Answer 5

<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>

Siempre que el contenedor para lo que contenga div''s 1 y 2 sea lo suficientemente ancho para que quepa, esto debería estar bien.

Answer 6

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

Answer 7

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

Una cosa a tener en cuenta es que Firefox 2 no es compatible con 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 de texto dentro del elemento en Firefox si se ejecuta en modo peculiar. Todos los otros navegadores permiten esto hasta donde yo sé. Si desea establecer la alineación del texto mientras se ejecuta en el modo peculiar, deberá usar la propiedad -moz-inline-stack lugar de inline-block . Tenga en cuenta que esta es una propiedad exclusiva de Mozilla, por lo que tendrá que hacer un poco de detección del navegador para asegurarse de que solo Mozilla lo obtenga, mientras que otros navegadores obtienen el inline-block estándar.

Answer 8

height en em = relative line-height

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

= 100% lleno

Answer 9

Establecer la altura del siguiente rango debería funcionar en Firefox

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