input元素使用outline做边框，选中时会缩小？

Question

最近在做注册页面，先用outline做边框
奇怪的事情发生了，input:focus的时候outline的框框会变小！

检查后发现是浏览器在input:focus里加了一个outline-offset:-2px

很奇怪为什么要这样做？
除了在css里把这个样式覆盖掉，还有其他避免的方法吗？

Answer 1

这个问题换一个浏览器可能就不存在了，这个有很大的随机性，跟浏览器默认的样式有关。
但是一般如果引入了CSS reset之后，这一个默认样式会被关闭。
所以这个问题应该不需要刻意去“局部”解决。

Answer 2

outline:0;
然后自己写边框才是正道。