Chrome 和 IE 中的 CSS input 标签长度不均(相对于 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[type="text"], fieldset.elist {
      width: 280 px;
}

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

编辑:有趣的是，该更新适用于所有浏览器，但不适用于 JsFiddle。