Rumah >hujung hadapan web >html tutorial >Pratetap terbaik Select serasi sepenuhnya dengan semua penyemak imbas select_HTML/Xhtml_Pengeluaran halaman web
Pratetap terbaik Select serasi sepenuhnya dengan semua penyemak imbas select_HTML/Xhtml_Pengeluaran halaman web
- WBOYasal
- 2016-05-16 16:40:431302semak imbas
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.
:// www.w3.org/1999/xhtml">