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
Zabbix-Konfiguration DingTalk-Alarmfunktions-Implementierungscode
brauchen Das Konfigurieren von DingTalk-Alarmen i...
Implementierung der Nginx-Konfiguration für den Multi-Port- und Multi-Domain-Name-Zugriff
Um mehrere Sites auf einem Server bereitzustellen...
Schritte zur Installation von cuda10.1 unter Ubuntu 20.04 (grafisches Tutorial)
Vorbereitung vor der Installation Der Hauptzweck ...
Ausführliches Tutorial zur Installation von MySql 5.6.35 winx64
Hinweis: Beim Projektstart ist kein Fehler aufgru...
So verwenden Sie „union all“ in MySQL, um die Union-Sortierung zu erhalten
Manchmal kommt es in einem Projekt aus irreversib...
Detaillierte Analyse, warum MySQL die Verwendung von UUID oder Snowflake-ID als Primärschlüssel nicht empfiehlt
Vorwort: Beim Entwerfen einer Tabelle in MySQL em...
Verstehen Sie das CSS3-Rasterlayout in 10 Minuten
Grundlegende Einführung Im vorherigen Artikel hab...
Analyse des Prozesses zur Implementierung eines Nginx+Tomcat-Clusters unter Windwos
Einführung: Nginx (die Aussprache ist gleichbedeu...
Beispielcode zum Ändern der Farbe eines PNG-Bildes durch einen CSS3-Filter
Diese Methode verwendet den filter in CSS3 drop-s...
So implementieren Sie abgerundete Ecken mit CSS3 unter Verwendung von JS
Ich bin auf ein Beispiel gestoßen, als ich nach e...
Vue3 implementiert CSS unendlichen nahtlosen Scrolleffekt
In diesem Artikelbeispiel wird der spezifische Co...
Implementierung von Docker zum Erstellen eines Zookeeper- und Kafka-Clusters
Ich habe vor Kurzem Kafka gelernt. Als ich mich d...
JavaScript-Code zur Implementierung eines einfachen Rechners
In diesem Artikelbeispiel wird der spezifische Ja...
Detaillierter Installationsprozess und Konfiguration von mysql5.7.19 zip
Offizielle Version von MySQL v5.7.19 (32/64-Bit-I...
Referenzieren Sie SVG-Bilder in CSS, um den Implementierungscode für dynamische Farbumschaltung zu unterstützen
Wenn wir ein SVG-Bild zur Anzeige hinzufügen, erh...