Rumah > hujung hadapan web > tutorial css > Mengapa Butang Saya Mempunyai Jurang 1px di Bahagian Bawah dalam Chrome dan Safari?

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

Patricia Arquette
Lepaskan: 2024-11-03 10:29:03
asal
330 orang telah melayarinya

Why Does My Button Have a 1px Gap at the Bottom in Chrome and 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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan