Lösungen für Unterschiede in der Browserinterpretation hinsichtlich Größe, Breite und Höhe in CSS

Schauen wir uns zunächst ein Beispiel an

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">
<Kopf>
<meta http-equiv=”Inhaltstyp” content=”text/html; charset=gb2312″ />
<title>Unbenanntes Dokument</title>
<Stil>
#m{Höhe:300px;Breite:300px;Hintergrund:#ccc}
#a{float:left;Höhe:100px;Breite:100px;Hintergrund:#f00;}
#b{float:left;Höhe:100px;*Höhe:110px;_Höhe:120px;Breite:100px;Hintergrund:#0f0;}
#c{löschen:beide;Höhe:100px;Breite:100px;*Breite:100px;_Breite:120px;Hintergrund:#00f;}
</Stil>
</Kopf>
<Text>
<div id=”m”>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>

Dabei definiere ich jeweils drei Höhen.
Die erste normale Definition wird in allen Browsern wirksam;
Die zweite Definition fügt vorne ein Sternchen hinzu, das in IE6 und IE7 als Höhenattribut erkannt wird, aber Firefox und IE8 halten es für einen Syntaxfehler und ignorieren es. Gemäß der Ausführungsreihenfolge wird die Höhe mit einem Sternchen in IE6 und IE7 ausgeführt, und die erste normale Höhe ist ungültig (oder wird überschrieben).
Die dritte Höhe hat einen Unterstrich davor. Nur IE6 betrachtet den Unterstrich als gültiges Höhenattribut, während IE7, IE8 und Firefox das Attribut „_height“ als nicht vorhandenes Attribut betrachten und es daher nicht ausführen, während IE6 es ausführt. Auf diese Weise werden die ersten beiden Höhen durch die unterstrichene Höhe in IE6 abgedeckt.

Anhand dieses Beispiels sollte Ihnen klar sein, dass wir die Symbole * und _ zur Unterstützung der Definition verwenden können, wenn wir in unterschiedlichen Browsern unterschiedliche Höhen eines Elements festlegen möchten. Gleichzeitig haben wir auch gelernt, dass Microsoft ein Unternehmen mit einer hohen Fehlertoleranz ist! Haha.

Werden in diesem Beispiel allerdings die ersten beiden Zeilen der Dokumenttyp- und Namespace-Deklarationen entfernt, wird auch die unterstrichene Höhe wieder normal angezeigt.

Die Breiteneinstellungen sind gleich.

Bei unserer tatsächlichen Arbeit stoßen wir häufig auf unterschiedliche Browserinterpretationen von Randattributen. Dann können Sternchen und Unterstriche eine große Hilfe sein.

<<: Eine kurze Erläuterung, wie Tomcat den übergeordneten Delegationsmechanismus unterbricht

>>: Mehrere Möglichkeiten zur vertikalen und horizontalen Zentrierung in CSS3 mit unbestimmter Höhe und Breite

Implementieren Sie den Vollbildmodus und verlassen Sie den Vollbildmodus des Monitors in Vue

Lösen Sie das Problem, dass dem Benutzer „root“@„%“ der Zugriff auf die Datenbank „xxx“ verweigert wurde, nachdem eine Datenbank in MySQL erstellt wurde.

Artikel

So verwenden Sie dl(dt,dd), ul(li), ol(li) in HTML

Lösungen für Unterschiede in der Browserinterpretation hinsichtlich Größe, Breite und Höhe in CSS

Implementieren Sie den Vollbildmodus und verlassen Sie den Vollbildmodus des Monitors in Vue

Beispielcode zur Implementierung von Hintergrundtransparenz und undurchsichtigem Text mit CSS3

So implementieren Sie die Anpassung des Echats-Diagramms an große Bildschirme

Lösen Sie das Problem, dass dem Benutzer „root“@„%“ der Zugriff auf die Datenbank „xxx“ verweigert wurde, nachdem eine Datenbank in MySQL erstellt wurde.

So verwenden Sie dl(dt,dd), ul(li), ol(li) in HTML

Prozessanalyse der Bereitstellung von ASP.NET Core-Anwendungen auf dem Linux-System Docker

So nutzen Sie Partitionierung, um die MySQL-Datenverarbeitung für Milliarden von Daten zu optimieren

Beispiel für die Implementierung des Skelettbildschirms des WeChat-Applets

MySql-Wissenspunkte: Transaktion, Index, Sperrprinzip und Nutzungsanalyse

CSS3 zum Erzielen eines dynamischen Hintergrundverlaufseffekts

Artikel empfehlen

Zusammenfassung der MySQL-Funktionsmethode LOAD_FILE()

Grafisches Tutorial zur Installation der neuesten Version des MySQL-Servers unter Windows 7 64 Bit

So beheben Sie den PyCurl-Fehler unter Linux

Codeblock-Hervorhebung kann kopiert und angezeigt werden js Plugin highlight.js + clipboard.js Integration

Lösung zur Konvertierung in Inline-Styles in CSS (css-inline)

Wie gut kennen Sie sich mit reinen HTML-Tags aus?

Beispielcode zur Implementierung von Follow Ads mit JavaScript

Erfahren Sie, wie Sie die Selbstüberwachung von Apache SkyWalking schnell aktivieren

So analysieren Sie die Leistung von MySQL-Abfragen

Schritte zur Verwendung von ORM zum Hinzufügen von Daten in MySQL

So installieren und konfigurieren Sie den Postfix-Mailserver unter CentOS 8

Detaillierte Erklärung der neuen Array-Methoden in JavaScript es6

JavaScript-Tipps zur Verbesserung Ihrer Programmierkenntnisse

Detailliertes Tutorial zur Konfiguration von Docker nginx + https-Subdomains

Problem mit Zeitzonenfehler im Docker-Container