css - Webkit 提交按钮奇怪的填充导致重叠

Question

它在 Chrome 中的样子:

我已经关闭了所有样式。这里只有来自 Chrome 的样式。您可以看到该按钮在垂直方向(而不是水平方向)有较大的填充。

Chrome 认为填充是什么

7.273px 的左填充导致整个按钮被推到右边一点，这就是它没有与文本字段对齐的原因。

它是如何获得填充的:

完整样式:

我无法在 JSfiddle 中重新创建它:https://jsfiddle.net/cmqz4tpq/

<input id="user_id" name="user_id" type="text" value="0">
<br />
<input name="commit" type="submit" value="link">

请放心，没有 float 。

当我尝试覆盖元素样式中的填充时，它也不被尊重。

Answer 1

删除所有样式表和 javascript 后，我​​发现这是由 Webkit 的错误按钮渲染机制引起的。一旦我们返回原始缩放(在 Mac 上为 command + 0)，缩放将恢复正常，并且按钮将正确呈现，没有重叠。

这无法通过 CSS 修复 :(

如果有人能找到相关错误报告的 url，那就太好了。