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

Chrome呈现的输入字段比Firefox和IE更长

我尝试了很多东西，其中大部分我已经忘记了；但无论如何，都没有起作用

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.f1{
背景：黄色；
显示：内联块；
宽度：440px；
填充顶部：20px；
左侧填充：20px；
右边填充：20px；
垫底：0px；
利润率：10px；
位置：相对位置；
左：90px；
顶部：3px；
}
#id1，
#id2{
填充顶部：10px；
垫底：10px；
左侧填充：10px；
边界：0；
右边填充：100px；
边框宽度：2倍；
}
#id2{
位置：相对位置；
顶部：-10px；
}
.btn{
宽度：100px；
填充顶部：7px；
垫底：7px；
位置：相对位置；
顶部：-90px；
左：289px；
字体系列：“PT Sans Rown”，无衬线；
字号：700；
边界：0；
背景#00ade2；
字体大小：20px；
}

已经是用户了吗？登录

您应该给出框大小，以统一输入字段的宽度

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

您还应该添加填充和边框，以便用户代理不会优先于它们，因为它们会在不同的浏览器之间切换

注意到，如果您真的不应该这样做，那么您可以使用填充来设置输入的宽度，因为当您添加文本时，它将使用宽度来创建输入。

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

输入{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.f1{
背景：黄色；
显示：内联块；
宽度：440px；
填充顶部：20px；
左侧填充：20px；
右边填充：20px；
垫底：0px；
利润率：10px；
位置：相对位置；
左：90px；
顶部：3px；
}
#id1，
#id2{
填充：10px；
宽度：270px；
边界：0；
;
}
#id2{
位置：相对位置；
顶部：-10px；
}
.btn{
宽度：100px；
填充顶部：7px；
垫底：7px；
位置：相对位置；
顶部：-90px；
左：289px；
字体系列：“PT Sans Rown”，无衬线；
字号：700；
边界：0；
背景#00ade2；
字体大小：20px；
}

已经是用户了吗？登录

找到了解决方案

增加

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

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

---

编辑：有趣的是，这个更新可以在本地所有浏览器上运行，但不能在JSFIDLE上运行。

对我来说，它工作得很好，在所有浏览器上都进行了测试。你清除缓存了吗？谢谢你的输入。甚至没有想到缓存。不过，我刚才试过这样做；还是不行。奇怪。不过，我已经找到了一个不同的解决方案：请参见下面的答案。您缺少宽度，正在使用填充进行补偿。请尝试此小提琴