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
Ein Artikel, der Ihnen HTML beibringt
Wenn Sie nicht unbedingt Künstler werden möchten,...
Antworten auf mehrere häufig gestellte MySQL-Interviewfragen
Vorwort: Bei Vorstellungsgesprächen für verschied...
MySQL-Lösung zur Datenpaging-Abfrageoptimierung auf Millionenebene
Wenn die Tabelle Zehntausende Datensätze enthält,...
Mysql 5.6 fügt eine Methode zum Ändern von Benutzername und Passwort hinzu
Melden Sie sich zuerst bei MySQL an Shell> MyS...
Bringen Sie Ihnen bei, wie Sie ein React+Antd-Projekt von Grund auf erstellen
Bei den vorherigen Artikeln handelte es sich um m...
Vue-Plugin-Fehler: Auf dieser Seite wurde Vue.js erkannt. Problem gelöst
Das Vue-Plugin meldet einen Fehler: Vue.js wurde ...
Lösungen für MySql-Abstürze und Dienststartfehler
Ich habe so lange mit PHP zu tun gehabt, aber die...
Eine einfache Erklärung der parallelen MySQL-Replikation
1. Hintergrund der parallelen Replikation Zunächs...
mysql-8.0.17-winx64 Bereitstellungsmethode
1. Laden Sie mysql-8.0.17-winx64 von der offiziel...
CSS zum Erzielen eines Chat-Blaseneffekts
1. Rendern JD-Effekt Simulationseffekt 2. Grundsa...
Detailliertes Tutorial zur MySQL-Installation und -Konfiguration
Inhaltsverzeichnis Installationsfreie Version von...
Detaillierte Erklärung der Angular-Komponentenprojektion
Inhaltsverzeichnis Überblick 1. Einfaches Beispie...
Designtheorie: Menschenorientiertes Designkonzept
<br />Als sich das Denken in Ost und West sp...
Javascript-Grundlagen: Detaillierte Erklärung der Operatoren und der Flusskontrolle
Inhaltsverzeichnis 1. Betreiber 1.1 Arithmetische...
Implementierungs- und Nutzungsszenarien der JS-Anti-Shake-Drosselungsfunktion
Inhaltsverzeichnis 1. Was ist die Anti-Shake-Funk...