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"><!-- Spanne { Hintergrundfarbe: #ffcc00; Breite: 150px; } --></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"><!-- Spanne { Hintergrundfarbe: #ffcc00; Anzeige: -moz-Inline-Box; Anzeige: Inline-Block; Breite: 150px;} --></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
Artikel empfehlen
Detaillierte Erläuterung der Berechnungsmethode von Flex-Grow und Flex-Shrink im Flex-Layout
Flex(彈性布局) in CSS kann das Layout einer Webseite ...
Mit JS einen rotierenden Weihnachtsbaum in HTML implementieren
<!DOCTYPE HEML PUBLIC> <html> <Kop...
Kapseln Sie die Navigationsleistenkomponente mit Vue
Vorwort: Die vollständige Kapselung eines Funktio...
JavaScript zur Implementierung der Funktion zum Ändern des Avatars
In diesem Artikel wird der spezifische JavaScript...
Vermeidung von durch Closures verursachten Problemen in JavaScript
Über let, um Probleme durch Schließung zu vermeid...
So verwalten Sie Benutzer und Gruppen beim Ausführen von Docker
Docker ist ein Verwaltungstool, das Prozesse als ...
Detaillierte Analyse des Linux-NFS-Mechanismus anhand von Fällen
In Fortsetzung des vorherigen Artikels erstellen ...
Zusammenfassung des MySQL Undo Log und Redo Log
Inhaltsverzeichnis Undo-Protokoll Erstellung und ...
Das automatische Porterkennungsskript von Zabbix Redis gibt das JSON-Format zurück
Wenn wir eine automatische Erkennung durchführen,...
Lösung für den Fehler bei der MySQL-Remoteverbindung
Ich bin schon einmal auf das Problem gestoßen, da...
Beispielanalyse für MySQL-Jointabelle und automatische ID-Inkrementierung
Wie schreibt man „join“? Wenn Sie „Left Join“ ver...
Detaillierte Schritte zum Aktivieren der SourceGuardian (sg11)-Verschlüsselungskomponente auf virtuellen Linux-Hosts
Hinweis: sg11 Unser Unternehmen unterstützt nur d...
So ersetzen Sie alle Tags im HTML-Text
(?i) bedeutet, dass die Groß-/Kleinschreibung nich...
Detaillierte Erläuterung des Startens und Einhängens des Docker-Nginx-Containers in den lokalen
Zunächst die Struktur innerhalb des Nginx-Contain...
Tutorial zum Importieren und Exportieren von Docker-Containern
Hintergrund Die Popularität von Docker hängt eng ...