Altura do SPAN no Firefox

Question

Usando CSS, estou tentando especificar a altura de uma tag SPAN no Firefox, mas ela simplesmente não está aceitando (o IE aceita, curiosamente).

O Firefox aceita a altura se eu usar um DIV, mas o problema de usar um DIV é a irritante quebra de linha depois dele, que não posso ter neste caso específico.

Tentei definir o atributo de estilo CSS de:

display: inline

para o DIV, mas o Firefox parece reverter para o comportamento SPAN de qualquer maneira e ignora o atributo height mais uma vez.

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>

Contanto que o contêiner para o que quer que esteja contendo os divs 1 e 2 seja largo o suficiente para que caibam, tudo bem.

Answer 2

Você pode definir qualquer elemento para display: inline-block para permitir que receba uma altura ou largura.Isso também permite aplicar quaisquer outros "estilos de bloco" a um elemento.

Uma coisa a ter cuidado é que o Firefox 2 não suporta esta propriedade.Firefox 3 é o primeiro navegador baseado em Mozilla a suportar esta propriedade.Todos os outros navegadores suportam esta propriedade, incluindo o Internet Explorer.

Tenha em mente que inline-block não permite que você defina o alinhamento do texto dentro do elemento no Firefox se estiver executando no modo quirks.Todos os outros navegadores permitem isso, até onde eu sei.Se você deseja definir o alinhamento do texto durante a execução no modo quirks, você terá que usar a propriedade -moz-inline-stack em vez de inline-block.Tenha em mente que esta é uma propriedade exclusiva da Mozilla, então você terá que fazer alguma detecção no navegador para garantir que apenas a Mozilla obtenha isso, enquanto outros navegadores obtêm o padrão inline-block.

Answer 3

Elementos embutidos não podem ter alturas (nem larguras) assim.SPANs já estão display: inline por padrão.O Internet Explorer é, na verdade, o navegador quebrado neste caso.

Answer 4

Como você está exibindo-o in-line, a altura deve ser definida na altura do seu atributo line-height.

Dependendo de como está disposto, você sempre pode usar float:left ou float:right no span/div para evitar a quebra de linha.Mas se você quiser no meio de uma frase, essa opção está fora de questão.

Answer 5

O problema é que 'display:inline' não pode obter uma altura associada porque, sendo inline, obtém sua altura do conteúdo.Enfim, como definir a altura de uma caixa quebrada no final de uma linha?

Você pode tentar definir 'line-height' ou, se isso não funcionar de acordo com sua satisfação, defina um preenchimento:

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

Answer 6

Você só pode alterar a altura (e largura) de um elemento span quando ele estiver definido como display: block;.Isso ocorre porque normalmente é um elemento embutido. div está configurado para display: block; normalmente.

Uma solução poderia ser usar:

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

Answer 7

Para definir a altura da extensão, o seguinte deve funcionar no Firefox

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

Answer 8

alinhamento do texto dentro do elemento que você pode ajustar usando os atributos padding e block-inline.display: bloco embutido;preenchimento superior: 3px;por exemplo

Answer 9

height em em = relative line-height

por exemplo height:1.1em com line-height:1.1

= 100% preenchido