简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > html tutorial > teks badan

Pratetap terbaik Select serasi sepenuhnya dengan semua penyemak imbas select_HTML/Xhtml_Pengeluaran halaman web

WBOY
Lepaskan： 2016-05-16 16:40:43
asal
1281 orang telah melayarinya

Kami tahu bahawa atribut teg pilih dalam setiap penyemak imbas dan sokongan setiap penyemak imbas adalah agak berbeza, yang menyebabkan kotak pilihan dipaparkan secara berbeza dalam setiap penyemak imbas Seterusnya, kami akan mencipta pilihan yang serasi sepenuhnya dengan menyokong CSS penampilan utama sifat-sifat.
Saya menggunakan pembolehubah kawalan untuk mengawal ketinggian, padding dan ketinggian garis pilihan dan menulis DEMO untuk menguji tiga situasi pada setiap penyemak imbas: height.100.padding.0, height.no.padding.100, no. height.no.padding, hasilnya adalah seperti yang ditunjukkan dalam imej pautan setiap pelayar penampilan DEMO

Kita boleh mendapatkan atribut penyelidikan berikut.

iaitu6

iaitu7

iaitu8

iaitu9

ff

ch

sf

op

Ketinggian lalai

22px

22px

19px

20px

19px

19px

tinggi

F

T

T

T

T

T

F

T

lapik

F

F

T

T

T

T

F

T

ketinggian garis

F

F

F

F

F

F

T

F

Text vertikal zentriert

T

T

T

F

F

T

T

T

Aus der obigen Zusammenfassung der Forschungsergebnisattribute wissen wir, dass IE6 unabhängig von der Einstellung eine feste Höhe von 22 Pixel hat, während andere Browser außer Safari das Höhenattribut unterstützen, daher legen wir height:22px fest. Jetzt ändern wir den Safari-Browser und stellen fest, dass nur Safari das Attribut line-height unterstützt. Daher können wir line-height verwenden, um seine Höhe auf 22 Pixel zu korrigieren, und unter der Voraussetzung, dass die Schriftgröße gleich ist, line-height: 22px festlegen 12px, und schließlich ist der Text in FF und IE9 nicht zentriert: 2px 0. Wir haben festgestellt, dass sowohl FF als auch IE9 zentriert sind, aber die Höhe der Auswahl in jedem Browser hat sich hier nicht erhöht. In der Höheneinstellung: Falls das Auffüllen einer kleinen Anzahl von Zahlen die Gesamthöhe nicht erhöht?
Das Folgende ist ein vollständig kompatibles Codebeispiel.

Code kopieren
Der Code lautet wie folgt:

:// www.w3.org/1999/xhtml">