Solution au problème selon lequel span ne peut pas déterminer la largeur dans Firefox ou IE_HTML/Xhtml_Webpage Production

Copier le code

Le code est le suivant :

< --
span {
background-color:#ffcc00;
width:150px ;
--> 🎜>
fixe width span
, il a été constaté qu'il n'était pas valide. Cela ne fonctionne ni dans Firefox ni dans IE.

En consultant la définition de width dans la norme CSS2, nous avons constaté que l'attribut width d'origine en CSS n'est pas toujours valide. Si l'objet est un objet en ligne, l'attribut width sera ignoré. Firefox et IE l'ont fait à l'origine en suivant les normes.


Modifier span en type de bloc et définir float n'est pas une solution parfaite

Ajoutez l'attribut d'affichage dans le CSS de span et définissez span sur le type de bloc Element afin que la largeur soit correct Cela fonctionne, mais cela sépare également le texte précédent et suivant sur des lignes différentes. De cette façon, span devient en fait un div.



Copier le code


Le code est le suivant :

span { background-color : #ffcc00; display:block; width:150px;} Beaucoup de gens suggéreront d'ajouter un autre attribut CSS float, qui peut effectivement résoudre le problème sous certaines conditions. Par exemple, dans notre exemple, s'il n'y a pas de texte devant span, c'est effectivement faisable. Mais si tel est le cas, le texte précédent et suivant seront connectés ensemble et span s'étendra jusqu'à la deuxième ligne.

Copier le code


Le code est le suivant :

span { background-color : #ffcc00; display:block; float:left; width:150px;}

Solution parfaite pour définir la largeur d'étendue

La définition CSS de le code suivant est parfait. Résolu le problème du réglage de la largeur de travée. Étant donné que les navigateurs ignorent généralement les propriétés CSS non prises en charge, il est préférable d'écrire la ligne display:inline -block à la fin, afin que dans Firefox, si le futur Firefox 3 est atteint, cette ligne fonctionnera. Le code peut être compatible avec différentes versions. en même temps.

Copier le code


Le code est le suivant :

:// www.w3.org/1999/xhtml" > < ;!- - span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block width:150px;}

-->