css - 不同浏览器计算和渲染的子像素不同

Question

目的:

我正在编写与此类似的代码来创建一个组件，其中输入字段具有嵌入式按钮:

http://codepen.io/anon/pen/pgwbWG?editors=110

如您所见，按钮 绝对定位为 top和 bottom设置为 0 , 以实现 100% 高度元素。

还需要注意的是，text-input 的边框必须保持可见，并且还要包裹按钮。 为此，我添加了一个 margin: 1px到 button 以便有(应该)空间显示周围的 text-input 红色边框(通常在输入字段内容无效时)。

问题:

在 Firefox 上它(大部分)呈现正确，而在 Chrome 上(显然在最新的 Safari 上)它在按钮的底部有一个 1px 的间隙.

CSS 似乎没问题，但它似乎是渲染中的计算/舍入问题，按钮的底部或顶部边距不是真正的 1px(可以看到它检查元素)。 而且输入的填充似乎也对此产生影响。

在不同的缩放率下，它会在按钮的顶部或底部添加或移除 1px 的边距，从而产生 1px 的间隙或覆盖的边框强>.

因为我将按钮 边距设置为0px然后底部边距是固定的，但我松开了顶部的 1px 边距，最终覆盖了文本输入的红色边框。

例子:

可能我解释的不够清楚或太冗长，所以这里有一些错误的屏幕截图，来自 Chrome 的不同缩放(请注意 CSS 始终相同):

解决方案:

我找不到跨浏览器解决方案。 如何处理它并获得一致的组件？ (请不要使用 Javascript)

Answer 1

如您所知，问题源于浏览器之间的亚像素微积分方法不同

例如，在 Chrome 中，边框的大小可以是小数，但边距的处理方式不同(作为整数)。

Chrome 团队没有关于它的文档，但可以在开发工具中看到:

据我所知，没有办法改变它。

相反，您可以将按钮中边距的使用转移到边框。

由于您需要为输入的 1px 边框获取空间，因此在按钮中执行相同操作，设置 1px 边框(而不是边距)，并将其设置为透明。

剩下的技巧是将 background-clip 属性设置为 padding box，这样透明度就不受背景影响了

Chrome 中还有另一个错误，当浏览器缩放时，以 em 表示的填充在这种精度级别上并不可靠。我在代码段中更改了它。

由于我们使用边框按钮来确定尺寸，我们可以使用嵌入阴影来设置边框样式。

* {
  margin: 0; padding: 0; box-sizing: border-box;
}
button, input, wrapper {
  display: inline-block; border-radius: 3px;
}

.wrapper {
  position: relative;
  
  width: 60%;
  margin: 1em;
  background-color: #ccc;
}

input {
  border: 1px solid red;
  width: 100%;
  
  background-color: limegreen;
  line-height: 3em;
/*  padding: 0.75em; */
  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;
}

<div class="wrapper">
  <input type="text">
  <button>Test</button>
</div>

另一个例子，按钮有边框。但是我们需要一个包装器来确定尺寸。

* {
  margin: 0; padding: 0; box-sizing: border-box;
}
button, input, wrapper {
  display: inline-block; border-radius: 3px;
}

.wrapper {
  position: relative;
  
  width: 60%;
  margin: 1em;
  background-color: #ccc;
}

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

.buttonwrap {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid transparent;
  width: 7em;
  margin: 0px;
  background-clip: padding-box;
}
button {
  position: absolute;
  right: 0px;
  top: 0;
  bottom: 0;
  width: 100%;
  border: 2px solid blue;
  margin: 0px;
}

<div class="wrapper">
  <input type="text">
  <div class="buttonwrap">
      <button>Test</button>
  </div>
</div>