Kita tahu bahwa sifat -sifat tag pilih di setiap browser dan dukungan setiap browser berbeda, yang menyebabkan kotak seleksi pilih ditampilkan secara berbeda di setiap browser. Di bawah ini, kami membuat pilih yang sepenuhnya kompatibel melalui dukungan atribut CSS penampilan utama.
Saya menggunakan metode pengendalian variabel untuk menulis demo untuk menguji tiga situasi pada setiap browser: tinggi.100.padding.0, height.no.padding.100, No.height.no.padding. Hasilnya adalah sebagai berikut: Tautan gambar, penampilan demo masing -masing browser.
Kami dapat memperoleh atribut penelitian berikut.
IE6 | IE7 | IE8 | IE9 | ff | ch | sf | op | |
Tinggi default | 22px | 22px | 19px | 20px | 19px | 19px | ||
tinggi | F | T | T | T | T | T | F | T |
lapisan | F | F | T | T | T | T | F | T |
tinggi garis | F | F | F | F | F | F | T | F |
Teks berpusat secara vertikal | T | T | T | F | F | T | T | T |
Melalui ringkasan atribut hasil penelitian yang disebutkan di atas, kita tahu bahwa IE6 diatur untuk diperbaiki pada 22px dan tidak berubah kapan saja, sementara browser lain kecuali Safari mendukung atribut ketinggian, jadi kami menetapkan tinggi: 22px. Jadi sekarang mari kita perbaiki browser Safari. Kami menemukan bahwa hanya Safari yang mendukung atribut garis-garis, sehingga Anda dapat menggunakan garis tinggi untuk memperbaiki tinggi badannya menjadi 22px. Ketika ukuran font adalah 12px, garis-line: 22px diatur. Pada akhirnya, teks dalam FF dan IE9 tidak terpusat, dan padding: 2px 0 diatur. Kami menemukan bahwa FF dan IE9 terpusat, tetapi ketinggian pemilihan masing -masing browser belum meningkat. Jadi ada sedikit keraguan di sini, di bawah pengaturan ketinggian, bantalan sejumlah kecil angka tidak meningkatkan ketinggian keseluruhan?
Di bawah ini adalah contoh kode yang sepenuhnya kompatibel.
Salin kode