Lösung für die in Firefox oder IE nicht ermittelte Spannweite

Code kopieren

Der Code lautet wie folgt:

<html xmlns="http://www.w3.org/1999/xhtml" >
<Kopf>
<title>Testspanne</title>
<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">span {
Hintergrundfarbe: #ffcc00;
Breite: 150px;
}</style>
</Kopf>
<Text>
feste <span >width</span> Spanne
</body>
</html>

Nach dem Testen habe ich festgestellt, dass es ungültig ist, egal ob in Firefox oder IE.

Durch Konsultieren der Definition von width im CSS2-Standard wird festgestellt, dass das width-Attribut in CSS nicht immer gültig ist. Wenn das Objekt ein Inline-Objekt ist, wird das width-Attribut ignoriert. Firefox und IE haben dies ursprünglich getan, um den Standards zu entsprechen.

Das Ändern der Spanne in den Blocktyp und das Festlegen des Floats ist keine perfekte Lösung

Fügen Sie dem CSS des Spans das Anzeigeattribut hinzu und setzen Sie den Span auf ein Blockelement. Dadurch wird zwar die Breite geändert, der vorhergehende und der folgende Text werden jedoch in unterschiedliche Zeilen gesetzt. Auf diese Weise wird span tatsächlich vollständig zu div.

Code kopieren

Der Code lautet wie folgt:

Spanne { Hintergrundfarbe: #ffcc00; Anzeige: Block; Breite: 150px;}

Viele würden vorschlagen, eine CSS-Eigenschaft „Float“ hinzuzufügen, was das Problem unter bestimmten Bedingungen tatsächlich lösen kann. In unserem Beispiel ist es beispielsweise tatsächlich möglich, wenn vor dem Span kein Text steht. Wenn es jedoch vorhanden ist, werden der Text davor und danach miteinander verbunden und die Spanne reicht bis zur zweiten Zeile.

Code kopieren

Der Code lautet wie folgt:

span { Hintergrundfarbe:#ffcc00;
Anzeige:Block; Float:links; Breite:150px;}

Die perfekte Lösung zur Spannweiteneinstellung

Die CSS-Definition im folgenden Code löst das Problem der Festlegung der Spannweite perfekt. Da Browser nicht unterstützte CSS-Eigenschaften normalerweise ignorieren, ist es am besten, die Zeile display:inline-block am Ende zu schreiben, damit diese Zeile in Firefox funktioniert, falls zukünftig Firefox 3 veröffentlicht wird, und der Code gleichzeitig mit verschiedenen Versionen kompatibel ist.

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Testspanne</title>
<mce:style type="text/css"></mce:Stil>
<style type="text/css" mce_bogus="1">span { Hintergrundfarbe:#ffcc00; Anzeige:-moz-inline-box; Anzeige:Inline-Block; Breite:150px;}</style>
</Kopf>
<Text>
feste <span>Breite</span> Spanne
</body>
</html>

<<: Detaillierter Prozess für den Einstieg mit Docker Compose HelloWorld

>>: Allgemeine DIV-Aufgaben (Teil 2) — Umwandlung in Editoren und verschiedene DIY-Anwendungen von DIV

Methoden und Probleme zum Festlegen des HTML-Zeilenabstands

Detaillierte Erläuterung der Prinzippraxis des Bootstrap-Frameworks für CSS3-Medienabfragen mit responsivem Layout (empfohlen)

Detaillierte Beschreibung der Verwendung des Medi...

Lösung für die in Firefox oder IE nicht ermittelte Spannweite

Methoden und Probleme zum Festlegen des HTML-Zeilenabstands

Detaillierte Erklärung zur passiven Überprüfung des Überlebensstatus des Servers durch Nginx

Prinzipielle Beispiele für die vier Netzwerktypen von Docker

Vue implementiert Beispielcode, um die Funktion zum Speichern von Passwörtern im Browser zu deaktivieren

Detaillierte Erklärung der in JavaScript integrierten Objekte, Mathematik und Zeichenfolgen

Zusammenfassung der HTML-Formatierungsstandards für webbasierte E-Mail-Inhalte

Detailliertes Tutorial zur Installation des ElasticSearch:7.8.0-Clusters mit Docker

Lösung für mehrere Docker-Container, die nicht die gleiche Portnummer haben

Ausführliche Erklärung zu Slots und Filtern in Vue

MySQL-Schnellwiederherstellungslösung basierend auf dem Zeitpunkt

Artikel empfehlen

Verwenden Sie das Ansichtsfenster im Meta-Tag, um das Bildschirm-CSS zu definieren

CocosCreator implementiert Skill-Kühleffekt

Select unterstützt kein Doppelklick-DBClick-Ereignis

Detaillierte Erklärung und Zusammenfassung der Verwendung des Crontab-Befehls für geplante Linux-Aufgaben

So entfernen Sie in Linux ganz einfach installierte Quellpakete

Detaillierte Erläuterung der Fallstricke des Nginx-Proxy-Socket.io-Dienstes

Best Practices-Handbuch für partitionierte MySQL-Tabellen

Analyse des HTML-Schreibstils und Gründe erfahrener Leute

So handhaben Sie Bilder in Vue-Formularen

Informationen zur Bildlaufleiste in HTML/Bildlaufleiste entfernen

Detaillierte Erklärung der JavaScript-Funktion dieses Zeigeproblems

Detaillierte Erläuterung der Prinzippraxis des Bootstrap-Frameworks für CSS3-Medienabfragen mit responsivem Layout (empfohlen)

Detaillierte Erklärung der Schlüsselwörter und reservierten Wörter in MySQL 5.7

Detaillierte Erklärung der Rolle statischer Variablen in MySQL

So erstellen Sie SonarQube mit Docker