Chrome和IE中的CSS输入标签长度不均匀（相对于Firefox）

Question

Chrome渲染的输入字段比Firefox和IE长。

我尝试了很多东西，其中大部分已经忘记了;但是，没有人工作。

JsFiddle

  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .f1 {
    background: yellow;
    display: inline-block;
    width: 440px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0px;
    margin: 10px;
    position: relative;
    left: 90px;
    top: 3px;
  }
  #id1,
  #id2 {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    border: 0;
    padding-right: 100px;
    border-width: 2px;
  }
  #id2 {
    position: relative;
    top: -10px;
  }
  .btn {
    width: 100px;
    padding-top: 7px;
    padding-bottom: 7px;
    position: relative;
    top: -90px;
    left: 289px;
    font-family: 'PT Sans Narrow', sans-serif;
    font-weight: 700;
    border: 0;
    background: #00ade2;
    font-size: 20px;
  }

<section class="firstlog">
  <form class="f1">
    <h1 id="user">ALREADY AN USER? LOGIN</h2>
      <p>
        <input id="id1">
      </p>
      <p>
        <input id="id2">
      </p>	
          <input class="btn" type="submit" name="submit" value="LOGIN">	
    </form>
    </section>

  

如果它有帮助，这就是它在剩余代码的上下文中的样子：http://i.imgur.com/HYszb7H.jpg

Answer 1

你应该给出应该统一输入字段宽度的盒子大小

input,textarea,select  {
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
}

您还应该添加填充和边框，以便用户代理不会优先于它们，并且他们倾向于将浏览器更改为浏览器。

注意到如果您真的不应该使用填充来表示输入的宽度，那么当您添加文本时，它会创建地狱使用宽度。

P.S。你会发现Firefox实际上是错误的，它在输入字段中添加了额外的像素。

Your fiddle

＆＃13;

＆＃13;

input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.f1 {
  background: yellow;
  display: inline-block;
  width: 440px;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 0px;
  margin: 10px;
  position: relative;
  left: 90px;
  top: 3px;
}
#id1,
#id2 {
  padding: 10px;
  width: 270px;
  border: 0;
  ;
}
#id2 {
  position: relative;
  top: -10px;
}
.btn {
  width: 100px;
  padding-top: 7px;
  padding-bottom: 7px;
  position: relative;
  top: -90px;
  left: 289px;
  font-family: 'PT Sans Narrow', sans-serif;
  font-weight: 700;
  border: 0;
  background: #00ade2;
  font-size: 20px;
}

＆＃13;

<section class="firstlog">

  <form class="f1">
    <h1 id="user">ALREADY AN USER? LOGIN</h2>
  <p>
    <input id="id1">
  </p>
  <p>
    <input id="id2">
  </p>	
      <input class="btn" type="submit" name="submit" value="LOGIN">	
</form>


</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

找到了解决方案！

已添加

    input[type="text"], fieldset.elist {
      width: 280 px;
}

到CSS，它适用于所有浏览器。耶！

编辑：有趣的是，更新在所有浏览器上本地工作，但不适用于JsFiddle。