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 Erklärung des Unterschieds zwischen CSS-Link und @import
Wie fügt man CSS in HTML ein? Es gibt drei Möglic...
Erfahren Sie, wie Sie Vue3 Reactivity implementieren
Inhaltsverzeichnis Vorwort Start Ein kleiner Geda...
Das schnellste Textsuchtool von Linux: ripgrep (die beste Alternative zu grep)
Vorwort Apropos Textsuchtools: Jeder sollte grep ...
JavaScript zum Implementieren des Slider-Verifizierungscodes
In diesem Artikel wird der spezifische JavaScript...
Zehn Erfahrungen bei der Präsentation chinesischer Webinhalte
<br /> Ich habe mich auf die drei Aspekte Te...
MySQL-Datenbanktabelle und Datenbankpartitionierungsstrategie
Lassen Sie uns zunächst darüber sprechen, warum w...
Beispielanalyse von Linux-Dateiverwaltungsbefehlen [Anzeige, Ansicht, Statistiken usw.]
Dieser Artikel beschreibt die Linux-Dateiverwaltu...
jQuery implementiert alle Warenkorbfunktionen
Inhaltsverzeichnis 1. Alles auswählen 2. Erhöhen ...
Tutorial zum Herunterladen, Installieren, Konfigurieren und Verwenden von MySQL unter Windows
Übersicht über MySQL MySQL ist ein relationales D...
Detaillierte Erklärung der atomaren DDL-Syntax von MySQL 8.0
Inhaltsverzeichnis 01 Einführung in Atomic DDL 02...
Detaillierte grafische Beschreibung des MySql8.023-Installationsprozesses (Erstinstallation)
Laden Sie zunächst das Installationspaket von der...
Beispielcode zum Implementieren eines gleichhohen Layouts auf mehrere Arten mit CSS
Das in diesem Artikel beschriebene Layout gleiche...
8 Gründe, warum Sie die Xfce-Desktopumgebung für Linux verwenden sollten
Aus verschiedenen Gründen (einschließlich Neugier...
Schritte für IDEA zur Integration von Docker zur Realisierung einer Remote-Bereitstellung
1. Aktivieren Sie den Remotezugriff auf den Docke...
Installieren Sie CentOS 7 auf VMware14 – Grafik-Tutorial
Einführung in CentOS CentOS ist eine Linux-Distri...