输入字段在Mozilla Firefox上扩展

Question

我一直在不同的网络浏览器上测试我的网站，包括谷歌浏览器，Mozilla Firefox，Opera，IE 11和Edge。我注意到在Mozilla Firefox和IE 11上，输入字段已扩展为2px 有办法解决吗？

input[type="text"],
input[type="password"] {
  background: #f0f0f0;
  height: 36px;
  width: 238px;
  border: none;
  border-radius: 2px;
  outline: none;
  text-align: center;
  font-family: Lato-Regular;
  font-size: 13px;
  margin-top: 10px;
  color: #bfbfbf;
}

<form action="#">
  <input type="text" placeholder="username">
  <input type="password" placeholder="password">
  <input type="submit" value=" ">
</form>

在Google Chrome，Opera和Edge上，它看起来像这样：

但是在Mozilla Firefox和IE11上看起来像这样：

Answer 1

将box-sizing: border-box添加到您的input：

＆＃13;

＆＃13;

input[type="text"],
input[type="password"] {
  box-sizing: border-box;
  background: #f0f0f0;
  height: 36px;
  width: 238px;
  border: none;
  border-radius: 2px;
  outline: none;
  text-align: center;
  font-family: Lato-Regular;
  font-size: 13px;
  margin-top: 10px;
  color: #bfbfbf;
}

＆＃13;

<form action="#">
  <input type="text" placeholder="username">
  <input type="password" placeholder="password">
  <input type="submit" value=" ">
</form>

＆＃13;

＆＃13;

＆＃13;