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

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

如您所见，按钮的绝对位置为

top

和

bottom

设置为

0

，以实现100%的高度元素

还要注意的是，文本输入的边框必须保持可见，并且还必须环绕按钮。 为了实现这一点，我在按钮上添加了一个

margin:1px

，这样就有（应该）空间来显示周围的文本输入红色边框（通常在输入字段内容无效时）

问题是： 在Firefox上它（大部分）被正确渲染，而在Chrome上（显然是在最新的Safari上），它在按钮底部会有一个1px的间隔

CSS看起来还可以，但在渲染中它似乎是一个计算/舍入问题，按钮的底部或顶部边距实际上不是1px（可以看到它检查元素）。 而且输入的填充似乎也会影响这一点

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

当我将按钮边距设置为

0px

时，底部边距是固定的，但我松开了顶部的1px边距，以覆盖文本输入的红色边框

例如： 可能我不清楚或者解释得太详细，所以这里有一些bug的截图，来自Chrome上不同的缩放（注意CSS总是一样的）：

解决方案： 我无法找到跨浏览器解决方案。 如何处理它并获得一致的组件？

---

（请不要使用Javascript）

正如您已经知道的，问题源于浏览器之间对亚像素演算的不同方法

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

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

好了，没有办法改变这一点

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

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

剩下的技巧是将“背景剪辑”属性设置为“填充框”，以便此透明度不受背景影响

Chrome还有另一个缺陷，当浏览器缩放时，以em表示的填充在这种精度水平下是不可靠的。我在片段中更改了这个

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

*{
边距：0；填充：0；框大小：边框框；
}
按钮、输入、包装器{
显示：内联块；边框半径：3px；
}
.包装纸{
位置：相对位置；
宽度：60%；
边缘：1米；
背景色：#ccc；
}
输入{
边框：1px纯红；
宽度：100%；
背景色：柠檬黄；
线高：3em；
/*填充：0.75em*/
填充：10px；
}
钮扣{
位置：绝对位置；
右：0；
排名：0；
底部：0；
边框：1px实心透明；
宽度：7em；
边际：0px；
背景剪辑：填充框；
盒影：镶嵌0px 0px 0px 2px黑色；
}

试验

用于获得显示所需的跨浏览器支持：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;
}

您可能需要为ie11做一次翻车：

.ie11std .wrapper {
  display:table;
}

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

---

尽管这不会有响应。

在包装器上设置边框可以吗？实际上不行，因为样式（边框和其他规则）取决于浏览器验证API中的：valid状态，并在包含的输入上执行。而且只要没有CSS4父选择器（

），我就无法设置包装器的样式。此外，我还想了解在其他情况下如何处理亚像素。防止亚像素渲染问题的一种方法是确保所有css属性（相对于大小、边距和填充）都是可被2整除的固定像素量。这并不适用于所有场景，但当它适用时，它会有所帮助。是的，但固定的像素数量，我们可以完全丢弃响应。缩放页面可能会破坏这些计算。感谢您提供的所有Flexbox提示！但答案并不明确；你能提供更多关于为什么这会解决我的渲染问题的见解吗？另外，不幸的是，在我的代码片段上尝试你的更改似乎并不能使亚像素渲染更好。您是否有一个修复不需要的间距的工作示例？谢谢您的建议！我曾考虑过使用border属性，但不幸的是，它已经被用于样式设计（很抱歉，没有在讨论中说明这一点）。无论如何，有趣的是知道分数和整数的计算在边界和边距上的处理方式不同（你们有什么联系吗？）。另外，不幸的是，在Chrome47上运行代码片段时，它仍然有底部不需要的像素间距.OMG！还有一个bug。我已经修改了代码片段，以解决这个问题（与填充相关）。我添加了两种方法来设置按钮边框的样式；把它改成px帮助很大。使用

框阴影

作为边框是一个很好的解决方法（即使我从SASS mixin继承了按钮的边框样式，并且尝试不必指定它；但我想这种情况必须是一个例外）。顺便说一句，如果你能参考一篇文章/链接/参考资料，解释边框和边距计算的差异（我找不到）；主要供将来和社区参考。不过，感谢您的解决方案，并享受您的赏金：）谢谢！我加了一点解释

.ie11std .wrapper {
  display:table;
}

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