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 output here FIREFOX： firefox output here

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

Answer 1

为您的框定义宽度，如下面的代码宽度：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;
}

如何在firefox和chrome中使输入框的长度相同？

1 个答案: