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

Question

我正在创建的网站上有很多输入文本框，其宽度非常具体，以像素为单位。

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

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

编辑#2：看起来 Tamil Selvan 的 box-sizing 成功了。它真的搞砸了我制作的其他 div 框的所有高度。看起来我只需要花一些时间来解决这个问题。谢谢！！

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

score 1 · Accepted Answer

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

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

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

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

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

1 回答 1