Bagaimana untuk Mencapai Konsistensi Merentas Pelayar untuk Butang Terbenam dalam Medan Input?

Konsistensi Merentas Penyemak Imbas dalam Butang Terbenam dan Komponen Medan Input

Isu yang dihadapi dalam menjajarkan butang terbenam dalam medan input timbul daripada pelbagai pengiraan subpiksel merentas penyemak imbas yang berbeza, khususnya antara Chrome dan Firefox. Semasa Firefox memaparkan elemen dengan betul, Chrome memperkenalkan jurang 1px di bahagian bawah butang.

Memahami Masalah

Dalam Chrome, sempadan boleh mempunyai saiz pecahan, manakala jidar adalah dikendalikan secara berbeza (sebagai integer). Perbezaan ini membawa kepada pemaparan yang tidak konsisten, menyebabkan jidar butang dimatikan sebanyak 1px.

Menyelesaikan Masalah

Untuk memastikan kelakuan merentas pelayar yang konsisten, adalah disyorkan untuk gunakan jidar lutsinar pada butang dan bukannya jidar. Dengan menetapkan sempadan lutsinar 1px dan melaraskan sifat klip latar belakang kepada "kotak padding", adalah mungkin untuk mencipta ruang yang diperlukan tanpa menjejaskan latar belakang butang.

Pelaksanaan

Untuk melaksanakan penyelesaian ini:

1. Alih keluar jidar daripada butang: jidar: 0px;.
2. Tambah jidar lutsinar 1px pada butang: jidar: 1px lutsinar pepejal;.
3. Tetapkan sifat klip latar belakang kepada "kotak padding": klip latar: kotak padding;.
4. Secara pilihan, buat rupa sempadan menggunakan bayang kotak sisipan hitam: kotak -bayang: inset 0px 0px 0px 2px hitam;.

Kesimpulan

Dengan memahami perbezaan dalam pemaparan subpiksel antara penyemak imbas dan melaksanakan pendekatan yang konsisten menggunakan sempadan lutsinar , adalah mungkin untuk mencipta butang terbenam dan komponen medan input yang dijajarkan dengan betul merentas Chrome, Firefox dan penyemak imbas lain.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Konsistensi Merentas Pelayar untuk Butang Terbenam dalam Medan Input?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!