Saya yakin pertanyaan ini telah ditanyakan oleh banyak orang di Internet, dan baru-baru ini dibahas kembali. Saya ingin mencatat pemahaman pribadi saya. Perbedaan antara border:none dan border:0; , kinerja teoretis Perbedaan kedua adalah perbedaan kompatibilitas browser.
Perbedaan kinerja:
[border:0;] Meskipun piksel yang disetel ke "0" untuk batas tidak terlihat di halaman, sesuai dengan nilai default batas, browser masih menampilkan lebar batas/warna batas, yaitu, nilai memori telah terisi.
[border:none;] Setel batas ke "tidak ada", yang berarti tidak ada batas. Saat browser mengurai "tidak ada", browser tidak akan melakukan tindakan rendering, yaitu tidak akan menggunakan nilai memori.
Perbedaan kompatibilitas:
Perbedaan kompatibilitas hanya berlaku untuk browser IE6, IE7 dan tombol label serta input. Situasi ini akan terjadi di bawah tema XP win, win7, dan vista.
[border:none;] Ketika border "none", sepertinya border yang tidak valid untuk IE6/7 masih ada, seperti terlihat pada contoh berikut Demo1 :
[border:0;] Ketika border adalah "0", ini terasa lebih efektif daripada "none". Semua browser menyembunyikan border secara seragam, seperti yang ditunjukkan pada contoh berikut Demo2 :
Ringkaslah :
Membandingkan border:0; dan border:none;, perbedaannya terletak pada rendering dan no rendering. Saya merasa keduanya memiliki hubungan yang mirip dengan display:none; dan visibilitas:hidden; dari atribut border. Meskipun diyakini terdapat perbedaan performa rendering, hal tersebut hanya dapat dikatakan bersifat teoritis.
Bagaimana cara membuat border:none sepenuhnya kompatibel? Cukup tambahkan atribut latar belakang ke pemilih yang sama, seperti yang ditunjukkan pada contoh berikut Demo3 :
Mengenai border:0; dan border:none;, saya pribadi lebih suka menggunakan border:none;, karena border:none; tidak kontroversial dalam hal konsumsi kinerja, dan kompatibilitas dapat diselesaikan dengan atribut latar belakang dan bukan merupakan hambatan .