Mengapa Butang Saya Mempunyai Jurang 1px di Bahagian Bawah dalam Chrome dan Safari?

Percanggahan Sub-Pixel dalam Penyampaian Butang Merentasi Pelayar

Percanggahan dalam pemaparan komponen yang terdiri daripada medan input dengan butang terbenam berpunca daripada variasi dalam pengiraan sub-piksel antara penyemak imbas.

Penjelasan Masalah

Firefox dengan betul memaparkan butang dengan ketinggian 100% dan sempadan yang boleh dilihat, manakala Chrome dan Safari memperkenalkan jurang 1px di bahagian bawah. Isu ini timbul kerana Chrome membundarkan jidar kepada integer, mengakibatkan pengiraan jidar bawah butang menjadi salah.

Penyelesaian

Untuk menyelesaikan percanggahan pemaparan silang penyemak imbas ini, pindahkan penggunaan jidar daripada butang ke sempadan lutsinar. Tetapkan jidar butang kepada 1px dan gunakan sifat latar belakang-klip: kotak padding untuk mengelakkan ketelusan daripada menjejaskan latar belakang. Selain itu, gantikan pelapik berasaskan em dengan nilai piksel tetap untuk menangani pepijat berkaitan zum dalam Chrome.

Coretan Kod Akhir

<code class="css">.wrapper {
  position: relative;
  width: 60%;
  margin: 1em;
  background-color: #ccc;
}

input {
  border: 1px solid red;
  width: 100%;
  background-color: limegreen;
  line-height: 3em;
  padding: 10px;
}

button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid transparent;
  width: 7em;
  margin: 0px;
  background-clip: padding-box;
  box-shadow: inset 0px 0px 0px 2px black;
}</code>

Atas ialah kandungan terperinci Mengapa Butang Saya Mempunyai Jurang 1px di Bahagian Bawah dalam Chrome dan Safari?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!