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.

	ie6	ie7	ie8	ie9	ff	ch	sf	op
Standardhöhe	22px	22px			19px	20px	19px	19px
Höhe	F	T	T	T	T	T	F	T
Polsterung	F	F	T	T	T	T	F	T
Zeilenhöhe	F	F	F	F	F	F	T	F
Text vertikal zentrieren	T	T	T	F	F	T	T	T

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?

Lösen Sie schnell das Problem verstümmelter Zeichen und springender Zeilen in aus MySQL exportierten SCV-Dateien

Wählen Sie die besten Voreinstellungen aus, um vollständige Kompatibilität mit allen Browsern zu erreichen.

Lösen Sie schnell das Problem verstümmelter Zeichen und springender Zeilen in aus MySQL exportierten SCV-Dateien

Responsive Layout-Zusammenfassung (empfohlen)

Lösung zum Vergessen des MySQL-Root-Passworts in MACOS

Design Association: Warum haben Sie am falschen Ort gesucht?

10 Minuten, um das Single-Page-Anwendungsrouting des WeChat-Applets gründlich zu verstehen

Lösung für Docker-Container, der Schriftarten wie Songti nicht erkennt

So schreiben Sie schönen HTML-Code

Installieren Sie JDK1.8 in einer Linux-Umgebung

Leitfaden für Anfänger zum Erstellen einer Website ⑥: Detaillierte Verwendung von FlashFXP

Detaillierte Schritte zum Erstellen, Ausführen, Veröffentlichen und erstmaligen Abrufen eines Docker-Images

Artikel empfehlen

Grafisches Tutorial zur Installation und Konfiguration komprimierter Pakete für MySQL 5.7.24

Detailliertes Beispiel für sharedWorker in JavaScript zur Realisierung einer mehrseitigen Kommunikation

Tägliche Studiennotizen im HTML-Designmuster

Detaillierte Erklärung der verschiedenen Verwendungen von proxy_pass in nginx

Grafisches Tutorial zur Konfigurationsmethode für die kostenlose Installationsversion von MySQL 5.7.17 (Windows 10)

Detaillierte Schritte zum Einrichten eines Nexus-Servers

Eine kurze Diskussion zur MySQL-Indexoptimierungsanalyse

Detaillierte Diskussion der Unterschiede zwischen Schleifen in JavaScript

Detaillierte Erklärung des Explain-Typs in MySQL

JavaScript-Timer zur Realisierung einer zeitlich begrenzten Flash-Sale-Funktion

Perfekte Lösung für das Problem des CSS-Hintergrundbildpfads im Webpack

Vue implementiert einen einfachen Laufschrifteffekt

So konfigurieren Sie ein SSL-Zertifikat in Nginx, um den HTTPS-Dienst zu implementieren

Grafisches Tutorial zur MySQL8-Installationsversion

Einführung in das Linux-Netzwerksystem