html - chrome 与所有其他浏览器的输入文本框宽度不同

Question

我正在创建的网站上有很多输入文本框，它们的宽度非常特定(以像素为单位)。

方框的宽度在 Safari 和 Firefox 中都是一样的，但在 Chrome 中，它们相差了几个像素。有谁知道为什么会发生这种情况或导致这种情况的原因是什么？

编辑:我也使用 Eric Meyer 的 Reset CSS v2.0

编辑 #2:看起来 Tamil Selvan 的盒子大小调整成功了。它真的弄乱了我制作的其他 div 框的所有高度。看来我只需要花一些时间来解决这个问题。谢谢!!

input {
  padding:3px;
  height:8px;
  outline: 0;
  border:0;
  border-radius:3px;
}

Answer 1

看起来 Tamil Selvan 的 box-sizing 起到了一些作用。

我添加了以下内容以真正解决我遇到的盒子不一样的一些问题:

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

但是，我发现字母间距也是一个问题。 Safari 和 chrome 的字母间距也略有偏差，我也在想办法解决这个问题。

Letter Spacing Example

font-family: 'Arial Narrow', Arial, sans-serif;
font-size:13px;