Lösung für das Problem, dass span die Breite in Firefox oder IE_HTML/Xhtml_Webpage Production nicht bestimmen kann

Code kopieren

Der Code lautet wie folgt:

background-color:#ffcc00;
width:150px
--> 🎜>< ;body>
fixed width span



Es wurde festgestellt, dass es ungültig war. Es funktioniert weder in Firefox noch im IE.

Bei der Betrachtung der Definition der Breite im CSS2-Standard haben wir festgestellt, dass das ursprüngliche Breitenattribut in CSS nicht immer gültig ist. Wenn das Objekt ein Inline-Objekt ist, wird das Breitenattribut ignoriert. Firefox und IE taten dies ursprünglich, indem sie Standards befolgten.

Span in Blocktyp zu ändern und Float einzustellen ist keine perfekte Lösung


Fügen Sie das Anzeigeattribut im CSS von Span hinzu und setzen Sie Span auf Blocktyp-Element, sodass die Breite gleich ist richtig Es funktioniert, aber es trennt auch den vorhergehenden und folgenden Text in verschiedene Zeilen. Auf diese Weise wird span tatsächlich zu einem div.



Code kopieren

Der Code lautet wie folgt:

span { Hintergrundfarbe: #ffcc00; display:block; width:150px;}

Viele Leute werden vorschlagen, ein weiteres CSS-Attribut float hinzuzufügen, was das Problem unter bestimmten Bedingungen tatsächlich lösen kann. Wenn in unserem Beispiel beispielsweise kein Text vor span steht, ist dies tatsächlich machbar. Wenn dies jedoch der Fall ist, werden der vorhergehende und der folgende Text miteinander verbunden und span läuft bis zur zweiten Zeile.

Code kopieren

Der Code lautet wie folgt:

span { Hintergrundfarbe: #ffcc00; display:block; float:left; width:150px;}

Perfekte Lösung zum Festlegen der Spannenbreite


Die CSS-Definition von Der folgende Code ist perfekt. Das Problem der Spannweiteneinstellung wurde gelöst. Da Browser normalerweise nicht unterstützte CSS-Eigenschaften ignorieren, ist es am besten, die Zeile display:inline -block am Ende zu schreiben, damit diese Zeile in Firefox funktioniert, wenn das zukünftige Firefox 3 erreicht wird. Der Code kann mit verschiedenen Versionen kompatibel sein gleichzeitig.

Code kopieren

Der Code lautet wie folgt:

:// www.w3.org/1999/xhtml" > < ;!- -

span { background-color:#ffcc00; display:-moz-inline-box display:inline-block;}

-->