使按钮与Firefox中的文本输入字段的宽度相同

Jam*_*lly 4 html css css3

我正在尝试使文本输入元素与提交输入元素的宽度相同,并且出于某种原因我正在努力解决这个问题.(我可能错过了一些非常明显的东西).

在Chrome,Opera,IE9和IE10中,这可以解决问题:

input {
    box-sizing:border-box;
}
Run Code Online (Sandbox Code Playgroud)

但是在Firefox中,这不能解决问题,因为文本输入仍然比提交输入长(并且最终比任何声明的宽度都长).

Chrome,Opera,IE9和IE10:

工作实例

Firefox问题:

Firefox问题

请注意,我在每个周围添加了1px边框,以使差异更清晰一些.

这是一个JSFiddle示例来说明这一点.请注意,我在Windows 7上使用的是最新版本的Chrome,Opera和Firefox.

我该怎么做才能确保所有浏览器的大小相同?

Sam*_*fel 7

Firefox仍然不支持正常版本box-sizing- 你必须使用mozilla css扩展.

-moz-box-sizing: border-box;
Run Code Online (Sandbox Code Playgroud)