javascript - 如何在 Firefox 和 Chrome 中使输入框的长度相同？

Question

我想在我的网站设计中有一个输入框。当我像下面这样编码时

HTML:

 <input type="text" name="lemail" value= "" placeholder="Email" id = "lemail"/>

CSS:

  *{
     font-size:12px;
     font-family: sans-serif,helvetica,arial;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     -ms-box-sizing: border-box;

  }  

  #lemail{

      position: absolute;
      top: 40px;
      left: 20px;

      padding-left: 20px;
      padding-top: 8px;
      padding-right: 20px;
      padding-bottom: 8px;
      border: 1px solid #007599;
      border-radius: 3px;

   }

拍照结果:

Chrome : chrome output here 火狐: firefox output here

这里的问题是 chrome 和 firefox 的输入框长度不同。在 firefox 中长度比在 chrome 中大。Border-box 不起作用。 如何使输入字段在两个浏览器中看起来相同？

Answer 1

定义框的宽度，如下面的代码 width:250px;

#lemail{
  position: absolute;
  top: 40px;
  left: 20px;
  padding-left: 10px;
  padding-top: 8px;
  padding-right: 20px;
  padding-bottom: 8px;
  border: 1px solid #007599;
  border-radius: 3px;
  width:250px;
}