为什么 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中文网其他相关文章！