Bagaimana untuk Mencapai Kotak Semak dan Penjajaran Label yang Konsisten Merentas Pelayar?

Cara Menjajarkan Kotak Semak dan Labelnya Secara Konsisten Merentas Pelayar

Soalan ini menyerlahkan cabaran yang dihadapi dalam menjajarkan kotak pilihan dan labelnya secara konsisten merentas pelayar yang berbeza, terutamanya Safari, Firefox , dan IE. Kod yang disediakan mempamerkan HTML dan CSS standard untuk borang yang mengandungi kotak pilihan dan labelnya.

Satu penyelesaian yang pernah popular melibatkan penggunaan penjajaran menegak: garis dasar pada input untuk menjajarkan kotak pilihan dengan betul dalam Safari. Walau bagaimanapun, pendekatan ini sering mengakibatkan salah penjajaran dalam Firefox dan IE.

Selepas ujian dan pengubahsuaian yang meluas, penyelesaian berbeza muncul, yang melibatkan sifat CSS berikut:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin: 0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

Penyelesaian ini menjajarkan kotak semak dan labelnya pada baris berasingan dan memastikan penjajaran menegak tanpa mengira pelayar. Ia juga mengesot teks label dengan betul selepas membalut. Dengan pendekatan ini, kotak pilihan dan labelnya boleh diselaraskan secara konsisten dengan penyemak imbas silang.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Kotak Semak dan Penjajaran Label yang Konsisten Merentas Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!