Wählen Sie die besten Voreinstellungen aus, um vollständige Kompatibilität mit allen Browsern zu erreichen.
|
Wir wissen, dass die Eigenschaften des Auswahltags in jedem Browser und die Unterstützung jedes Browsers etwas unterschiedlich sind, was dazu führt, dass die Anzeige des Auswahlfelds in jedem Browser unterschiedlich ist. Als Nächstes erstellen wir eine vollständig kompatible Auswahl, indem wir die wichtigsten CSS-Erscheinungseigenschaften unterstützen. Ich habe eine DEMO für die Höhe, Polsterung und Zeilenhöhe der Auswahl mithilfe der Kontrollvariablenmethode geschrieben, um drei Situationen in verschiedenen Browsern zu testen: height.100.padding.0, height.no.padding.100, no.height.no.padding. Die Ergebnisse werden in den verlinkten Bildern angezeigt. Das DEMO-Erscheinungsbild jedes Browsers  Wir können die folgenden Forschungseigenschaften ableiten.
Durch die obige Zusammenfassung der Forschungsergebnisse und Attribute wissen wir, dass IE6 eine feste Höhe von 22px hat, egal wie sie eingestellt wird, und dass andere Browser außer Safari das Höhenattribut unterstützen, sodass wir die Höhe auf 22px einstellen. Jetzt korrigieren wir den Safari-Browser. Wir haben festgestellt, dass nur Safari das Zeilenhöhenattribut unterstützt. Daher können wir die Zeilenhöhe verwenden, um die Höhe auf 22 Pixel zu korrigieren. Unter der Voraussetzung, dass die Schriftgröße 12 Pixel beträgt, setzen wir Zeilenhöhe: 22 Pixel. Schließlich ist der Text in FF und IE9 nicht zentriert. Wir setzen dafür padding: 2px 0. Wir haben festgestellt, dass FF und IE9 zentriert sind, aber die Höhe der Auswahl in jedem Browser hat sich nicht erhöht. Hier ist also eine Frage. Wenn die Höhe eingestellt ist, erhöht das Padding einer kleinen Zahl nicht die Gesamthöhe? Das Folgende ist ein vollständig kompatibles Codebeispiel. 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=utf-8" /> <Titel>Demo</Titel> <Stil> *{Auffüllung:0; Rand:0} Textkörper {Schriftgröße: 12px} Wählen Sie {Höhe: 22px; Zeilenhöhe: 18px; Polsterung: 2px 0} </Stil> </Kopf> <Text> <div Stil="Rand oben:20px; Rand links:20px; Hintergrund:#000"> <Auswählen> <option>Demonstrationsfrage 1</option> <option>Demonstrationsfrage 2</option> <option>Demonstrationsfrage 3</option> <option>Demonstrationsfrage 4</option> <option>Demonstrationsfrage 5</option> </Auswählen> </div> </body> </html> |
<<: Fünf Verzögerungsmethoden für die MySQL-Zeitblindinjektion
>>: Wie oft werden mehrere setStates in React aufgerufen?
Artikel empfehlen
Zusammenfassung der CSS-Methoden zum Löschen von Floats
Float wird häufig im Layout von Webseiten verwend...
Front-End-Implementierung der GBK- und GB2312-Kodierung und Dekodierung von Zeichenfolgen (Zusammenfassung)
Vorwort Bei der Entwicklung eines Projekts stieß ...
Tutorial zur Neuinstallation von MySQL unter Windows 64-Bit (Zip-Version, dekomprimierte Version der MySQL-Installation)
Deinstallieren von MySQL 1. Deinstallieren Sie in...
Detaillierte Erklärung zur Verwendung des Befehls tcpdump zum Erfassen und Analysieren von Datenpaketen in Linux
Vorwort tcpdump ist ein bekanntes Befehlszeilento...
Die richtige Verwendung von MySQL-Indizes und detaillierte Erklärung der Indexprinzipien
1. Einleitung Warum brauchen wir Indizes? In allg...
Detaillierte Beschreibung der Verwendung der erweiterten Konfiguration von Firewalld unter Linux
IP-Masquerading und Port-Weiterleitung Firewalld ...
JavaScript-Datenvisualisierung: ECharts-Kartenerstellung
Inhaltsverzeichnis Überblick Vorsichtsmaßnahmen 1...
Eine einfache Methode zum Ändern der Größe hochgeladener Nginx-Dateien
Originallink: https://vien.tech/article/138 Vorwo...
MySQL-Backup-Tabellenvorgang basierend auf Java
Der Kern ist mysqldump und Runtime Der Vorgang is...
Über MySQL müssen Sie die Datentypen und Operationstabellen kennen
Datentypen und Operationen Datentabelle 1.1 MySQL...
Lösung für das Problem, dass HTML2-Canvas-SVG nicht erkannt wird
Es gibt eine neue Funktion, die das Erfassen eine...
Beschreibung des MySQL-Optimierungsparameters query_cache_limit
query_cache_limit query_cache_limit gibt die Puff...
So verwenden Sie async und await in JS
Inhaltsverzeichnis 1. asynchron 2. warten: 3. Umf...
Zusammenfassung häufig verwendeter Befehle für Linux-Dateioperationen
0. Neuer Betrieb: mkdir abc #Erstelle einen neuen...
Begrenzung der Anzahl kurzfristiger Zugriffe auf eine bestimmte IP basierend auf Nginx
Die Festlegung einer Begrenzung der Anzahl von Be...