SPAN Hauteur dans Firefox

Question

En utilisant CSS, j'essaie de spécifier la hauteur d'un tag SPAN dans Firefox, mais ce n'est tout simplement pas l'accepter (IE le fait, drôlement assez). Firefox accepte la hauteur si j'utilise un DIV, mais le problème avec l'utilisation d'un DIV est le saut de ligne ennuyeux après, ce que je ne peux pas avoir dans ce cas particulier.

J'ai essayé de définir l'attribut de style CSS de:

display: inline

pour le DIV, mais Firefox semble alors revenir au comportement SPAN et ignore à nouveau l'attribut height.

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> 

Tant que le conteneur pour tout ce qui tient div 1 et 2 est assez large pour les adapter, cela devrait aller.

Answer 2

Puisque vous l'affichez en ligne, la hauteur doit être définie à la hauteur de votre attribut line-height. En fonction de la disposition, vous pouvez toujours utiliser float: left ou float: à droite sur span/div pour éviter le saut de ligne. Mais si vous le voulez au milieu d'une phrase, cette option est désactivée.

Answer 3

Les éléments en ligne ne peuvent pas avoir de hauteurs (ni de largeurs) comme cela. Les SPAN sont déjà display: inline par défaut. Internet Explorer est en fait le navigateur brisé dans ce cas.

Answer 4

Vous pouvez uniquement modifier la hauteur (et la largeur) d'un élément d'étendue lorsqu'il est défini sur display: block;. C'est parce que c'est un élément en ligne normalement. div est défini sur display: block; normalement.

Une solution pourrait être d'utiliser:

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

Answer 5

Le problème est que « display: inline » ne peut pas obtenir une hauteur associée parce que, étant en ligne, il obtient sa hauteur de son contenu. Quoi qu'il en soit, comment définissez-vous la hauteur d'une boîte qui est cassée à la fin d'une ligne?

Vous pouvez essayer de définir « line-height » au lieu, ou si cela ne fonctionne pas à votre satisfaction, définir un padding:

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

Answer 6

Vous pouvez définir n'importe quel élément sur display: inline-block pour lui permettre de recevoir une hauteur ou une largeur. Cela vous permet également d'appliquer n'importe quel autre "style de bloc" à un élément. Une chose à faire attention cependant est que Firefox 2 ne supporte pas cette propriété. Firefox 3 est le premier navigateur basé sur Mozilla à prendre en charge cette propriété. Tous les autres navigateurs prennent en charge cette propriété, y compris Internet Explorer. Gardez à l'esprit que inline-block ne vous permet pas de définir l'alignement du texte dans l'élément sur Firefox s'il s'exécute en mode Quirks. Tous les autres navigateurs permettent cela autant que je sache. Si vous souhaitez définir l'alignement du texte en mode Quirks, vous devez utiliser la propriété -moz-inline-stack au lieu de inline-block. Gardez à l'esprit qu'il s'agit d'une propriété Mozilla uniquement, vous devrez donc faire une détection de navigateur pour vous assurer que Mozilla ne l'obtient que lorsque les autres navigateurs obtiennent la norme inline-block.

Answer 7

height dans em = relative line-height

par exemple height:1.1em avec line-height:1.1

= 100% rempli

Answer 8

alignement du texte à l'intérieur de l'élément on peut régler à l'aide des attributs de bourrage et bloc-inline. affichage: inline-block; rembourrage-top: 3px; par exemple

Answer 9

Pour définir la hauteur de l'échelle suivante doit fonctionner dans Firefox

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