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
Artikel empfehlen
Tutorial zur Verarbeitung statischer Ressourcen in Tomcat
Vorwort Alle Anfragen in Tomcat werden von Servle...
Die Beziehung zwischen Webseitenerstellung und Dampfbrötchen (Erfahrungsaustausch)
Ich habe gestern lange geschlafen und war den gan...
Installations-Tutorial zur grünen Version der MySQL-Datenbank zum Beheben des Systemfehlers 1067
Was ist der Unterschied zwischen der grünen Versi...
So erlauben Sie den Remotezugriff auf offene Ports in Linux
1. Ändern Sie die Firewall-Konfigurationsdatei # ...
3 Lösungen, damit Ihre Website alte Versionen der Browser IE6, 7, 8 und 9 unterstützt
Obwohl Microsoft später viel Forschung und Entwick...
Lassen Sie uns ausführlich über die Requisitenattribute von Komponenten in Vue sprechen
Inhaltsverzeichnis Frage 1: Wie werden Requisiten...
Analyse des Prozesses der einfachen Bereitstellung von Nginx im Docker-Container
1. Stellen Sie den Nginx-Dienst im Container bere...
Countdown-Effekt mit Javascript implementieren
Verwenden Sie Javascript, um den Countdown-Effekt...
Detailliertes Tutorial zum Bereitstellen von Jenkins basierend auf Docker
0. Als ich dieses Dokument erstellte, war es unge...
JavaScript-Entwurfsmuster, Befehlsmuster
Das Befehlsmuster ist ein Verhaltensentwurfsmuste...
So stellen Sie MySQL 5.7- und 8.0-Master-Slave-Cluster mit Docker bereit
> MySQL 5.7 Cluster Master und Slave bereitste...
Führen Sie die Schritte zur Verwendung von mock.js im Vue-Projekt aus
Verwenden von mock.js im Vue-Projekt Auswahl des ...
Analyse von Multithread-Programmierbeispielen unter Linux
1 Einleitung Die Thread-Technologie wurde bereits...
JavaScript implementiert die zufällige Generierung von Bestätigungscode und Bestätigung
In diesem Artikel wird der spezifische Code von J...
Analyse zur Lösung des Problems, dass Navicat Premium eine Verbindung zu MySQL 8.0 herstellt und den Fehler „1251“ meldet.
Wenn Menschen zu lange untätig waren, denken sie,...