SPAN Altezza in Firefox

Question

Utilizzando CSS, sto cercando di specificare l'altezza di un tag SPAN in Firefox, ma semplicemente non lo accetta (IE lo fa, abbastanza stranamente).

Firefox accetta l'altezza se utilizzo un DIV, ma il problema con l'utilizzo di un DIV è la fastidiosa interruzione di riga dopo di esso, che non posso avere in questo particolare caso.

Ho provato a impostare l'attributo di stile CSS di:

display: inline

per DIV, ma Firefox sembra comunque tornare al comportamento SPAN e ignorare ancora una volta l'attributo altezza.

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>

Finché il contenitore per qualunque cosa contenga i div 1 e 2 è abbastanza largo da adattarsi, dovrebbe andare bene.

Answer 2

Puoi impostare qualsiasi elemento su display: inline-block per consentirgli di ricevere un'altezza o una larghezza.Ciò consente anche di applicare qualsiasi altro "stilo di blocco" a un elemento.

Una cosa a cui prestare attenzione, tuttavia, è che Firefox 2 non supporta questa proprietà.Firefox 3 è il primo browser basato su Mozilla a supportare questa proprietà.Tutti gli altri browser supportano questa proprietà, incluso Internet Explorer.

Tieni presente che inline-block non ti consente di impostare l'allineamento del testo all'interno dell'elemento su Firefox se in esecuzione in modalità quirk.Per quanto ne so, tutti gli altri browser lo consentono.Se desideri impostare l'allineamento del testo durante l'esecuzione in modalità quirk, dovrai utilizzare la proprietà -moz-inline-stack invece di inline-block.Tieni presente che questa è una proprietà solo di Mozilla, quindi dovrai eseguire un rilevamento del browser per assicurarti che solo Mozilla lo ottenga, mentre gli altri browser ottengano lo standard inline-block.

Answer 3

Gli elementi in linea non possono avere altezze (né larghezze) in questo modo.Gli SPAN lo sono già display: inline per impostazione predefinita.In questo caso Internet Explorer è in realtà il browser danneggiato.

Answer 4

Dato che lo stai visualizzando in linea, l'altezza dovrebbe essere impostata all'altezza dell'attributo line-height.

A seconda di come è strutturato, puoi sempre utilizzare float:left o float:right su span/div per evitare l'interruzione di riga.Ma se lo vuoi nel mezzo di una frase, questa opzione non è disponibile.

Answer 5

Il problema è che "visualizza:inline' non può ottenere un'altezza associata perché, essendo in linea, ottiene la sua altezza dal contenuto.Ad ogni modo, come si definisce l'altezza di una scatola spezzata alla fine di una linea?

Potresti provare a impostare invece 'line-height' o, se non funziona in modo soddisfacente, impostare un riempimento:

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

Answer 6

Puoi modificare l'altezza (e la larghezza) di un elemento campata solo quando è impostato su display: block;.Questo perché normalmente è un elemento in linea. div è impostato per display: block; normalmente.

Una soluzione potrebbe essere quella di utilizzare:

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

Answer 7

Per impostare l'altezza dell'intervallo seguente dovrebbe funzionare in Firefox

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

Answer 8

l'allineamento del testo all'interno dell'elemento può essere regolato utilizzando gli attributi padding e block-inline.display: blocco in linea;imbottitura superiore: 3px;Per esempio

Answer 9

height In em = relative line-height

Per esempio height:1.1em con line-height:1.1

= riempito al 100%.