奇怪的Chrome边框半径字体大小错误

Question

对于令人困惑的标题感到抱歉，但这个错误很奇怪。

我正在处理一些按钮并注意到如果我的按钮在特定字体大小上有边框+边框半径+叠加（用于渐变），则Chrome显示2 px右边框而不是1。

这是小提琴

http://jsfiddle.net/3x73q9md/

我不确定我的覆盖容器是否继承了什么，但我无法找到修复，除了更改字体大小。

也试过

font:0/0 a;

在覆盖容器和各种CSS黑客上，但这没有任何意义。

按钮是相对的，覆盖层在所有方向上都是绝对拉伸的。

有人可以解释这是什么。

请注意，我不是要求添加/删除/修改当前的html结构。只需要了解为什么会发生这种情况并为其提供可能的解决方案。

Answer 1

将.overlay类 border-radius：inherit; 更改为 border-radius：0;

     .overlay {border-radius:0;}

演示：http://jsfiddle.net/3x73q9md/1/