Bagaimana batas ditampilkan di browser

Metode rendering atribut border di browser telah lama dibahas di grup QQ, dan saya selalu menggunakan border:0 none; Tentu saja ada juga alasan mengapa saya melakukan ini. Alasan ini akan disebutkan dalam analisis di bawah ini. Sebelum menganalisis properti perbatasan, beberapa hal yang perlu dijelaskan adalah:

1. Xiaozhi, saya bukan ahli analisis, saya hanya menggunakan dua alat Firebug dan pengembang IE untuk melihat hasil rendering browser di browser FF dan browser IE;
2. Karena kami hanya melihat hasil rendering browser FF dan browser IE, bukan berarti semua browser melakukan render dengan cara yang sama.

Untuk membandingkan gaya perbatasan dengan lebih baik, di sini kita memilih elemen "tombol", tetapi tag yang digunakan berbeda, yaitu elemen tag input dan elemen tag tombol. Ngomong-ngomong, satu hal yang perlu disebutkan adalah kesamaan kedua elemen label ini di berbagai browser adalah bahwa keduanya merupakan elemen kontrol sistem. Gaya batas dan latar belakang tombol memiliki hubungan mutlak dengan tema sistem.

Menggunakan kode struktur XHTML yang sama, bandingkan masing-masing browser FF dan browser IE.

Tombol

Animasi demonstrasi 1 Animasi demonstrasi 2

Melalui pengaruh gaya default tema sistem saat ini, kami menemukan bahwa browser IE sudah memiliki sedikit perbedaan dalam penguraian dua elemen tag, tombol dan masukan, namun sejauh halaman yang dilihat dalam tema sistem saat ini adalah Terkait, Efek kinerjanya hampir sama. Siswa yang tertarik dengan hal ini dapat bereksperimen sendiri. Pada hasil atribut yang terlihat pada kolom di atas tanpa ada definisi style CSS, hasil yang kita dapatkan adalah:

*Browser FF: Gaya batas tag masukan dan tag tombol adalah border-width:3px; border-style:outset;
* Browser IE: Gaya batas label masukan adalah lebar batas:2px; gaya batas label tombol adalah lebar batas:2px;

Dengan data ini, mari kita lihat apa hasilnya ketika kita mendefinisikan gaya untuk atribut border.