為什麼 Chrome 和 Safari 中我的按鈕底部有 1px 間隙？

跨瀏覽器按鈕渲染的子像素差異

渲染由帶有嵌入按鈕的輸入字段組成的組件的差異源於瀏覽器之間子像素計算的差異。

問題解釋

Firefox 正確渲染具有 100% 高度和可見邊框的按鈕，而 Chrome 和 Safari 引入了 1px底部的間隙。出現此問題的原因是 Chrome 將邊距四捨五入為整數，導致按鈕下邊距計算錯誤。

解決方案

要解決此跨瀏覽器渲染差異，請傳送從按鈕到透明邊框的邊距使用情況。將按鈕的邊框設為 1px 並套用 background-clip: padding-box 屬性以防止透明度影響背景。此外，將基於 em 的填充替換為固定像素值，以解決 Chrome 中與縮放相關的錯誤。

最終程式碼片段

<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>

以上是為什麼 Chrome 和 Safari 中我的按鈕底部有 1px 間隙？的詳細內容。更多資訊請關注PHP中文網其他相關文章！