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

Question

目的：

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

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

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

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

问题：

是在 Firefox 上它（大部分）正确呈现，而在 Chrome 上（显然在最新的 Safari 上）它会在 按钮的底部有一个 1px 的间隙强>。

CSS 看起来不错，但它似乎是渲染中的计算/舍入问题，按钮的底部或顶部边距并不是真正的 1px（可以看到它检查元素）。 而且输入的填充似乎也有影响。

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

当我将 button 边距设置为 0px 时，底部边距是固定的，但我在顶部松开了 1px 边距，最终覆盖了 text-input 的红色边框.

例子：

可能我解释不清楚或过于冗长，所以这里是一些错误的截图，来自 Chrome 上的不同缩放（注意 CSS 总是相同的）：

解决办法：

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

Answer 1

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

例如，在 Chrome 中，边框可以具有小数大小，但边距的处理方式不同（作为整数）。

我没有来自 Chrome 团队的文档，但可以在开发工具中看到：

AFAIK，没有办法改变它。

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

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

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

Chrome 中还有一个 bug，当浏览器缩放时，以 em 表示的填充在这种精度级别上并不可靠。我在sn-p中改变了这个。

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

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

Answer 2

使用http://autoprefixer.github.io/ 获得显示所需的跨浏览器支持：flex;

button, input, wrapper {
  display: inline-block; <----- Remove "display: inline-block;"
  border-radius: 3px;
}

.wrapper {
  position: relative;
  display: -webkit-box;<----- Add "display: flex;"
  display: -webkit-flex;<----- Add "display: flex;"
  display: -ms-flexbox;<----- Add "display: flex;"
  display: flex;<----- Add "display: flex;"
  width: 60%;
  margin: 1em;
  background-color: #ccc;
}

额外的阅读和学习材料：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://flexbox.io/#/

https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

注意：要覆盖 flex 规则，您需要使用 flex 简写而不是特定的覆盖，因为当前浏览器存在缺陷，例如。

.item {
  flex: 0 0 300px;
}

/* overide for some reason */

.item {
  flex: 1 0 300px;
}

/* NOT */

.item {
  flex-grow: 1;
}

您可能需要对 ie11 进行覆盖：

.ie11std .wrapper {
  display:table;
}

.ie11std .item {
  display:table-cell;
}

虽然这不会响应。