Hauteur SPAN dans Firefox

StackOverflow https://stackoverflow.com/questions/25041

  •  09-06-2019
  •  | 
  •  

Question

En utilisant CSS, j'essaie de spécifier la hauteur d'une balise SPAN dans Firefox, mais il ne l'accepte tout simplement pas (IE le fait, curieusement).

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 qui le suit, que je ne peux pas avoir dans ce cas particulier.

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

display: inline
pour le DIV, mais Firefox semble alors revenir au comportement SPAN de toute façon et ignore à nouveau l'attribut height.

Était-ce utile?

La solution 

<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 contient les div 1 et 2 est suffisamment large pour qu'ils puissent s'adapter, cela devrait aller.

Autres conseils

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 d'autres "styles de bloc" à un élément.

Une chose à laquelle il faut cependant faire attention est que Firefox 2 ne prend pas en charge 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.

Garde en tête que inline-block ne vous permet pas de définir l'alignement du texte à l'intérieur de l'élément sur Firefox s'il est exécuté en mode bizarreries.Pour autant que je sache, tous les autres navigateurs le permettent.Si vous souhaitez définir l'alignement du texte lors de l'exécution en mode bizarreries, vous devrez utiliser la propriété -moz-inline-stack au lieu de inline-block.Gardez à l'esprit qu'il s'agit d'une propriété réservée à Mozilla, vous devrez donc effectuer une détection du navigateur pour vous assurer que seul Mozilla l'obtient, tandis que les autres navigateurs obtiennent la norme. inline-block.

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

Puisque vous l'affichez en ligne, la hauteur doit être définie à la hauteur de votre attribut line-height.

Selon la façon dont il est présenté, vous pouvez toujours utiliser float:left ou float:right sur le span/div pour éviter le saut de ligne.Mais si vous le voulez au milieu d’une phrase, cette option est exclue.

Le problème est que « afficher :inline' ne peut pas obtenir de hauteur associée car, étant en ligne, il tire sa hauteur du contenu.Quoi qu’il en soit, comment définir la hauteur d’une case cassée en fin de ligne ?

Vous pouvez essayer de définir la « hauteur de la ligne » à la place, ou si cela ne fonctionne pas à votre satisfaction, définir un remplissage :

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

Vous ne pouvez modifier la hauteur (et la largeur) d'un élément span que lorsqu'il est défini sur display: block;.C'est parce qu'il s'agit normalement d'un élément en ligne. div est réglé 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>

Pour définir la hauteur de la portée, ce qui suit devrait fonctionner dans Firefox

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

l'alignement du texte à l'intérieur de l'élément, vous pouvez l'ajuster à l'aide des attributs padding et block-inline.display:bloc en ligne ;rembourrage supérieur : 3 px ;Par exemple

height dans em = relative line-height

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

= 100% rempli

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top