css - Chrome 和 Mobile 无法呈现与 Firefox 相同的结果 - Bootstrap

Question

我在容器中有一个输入字段，在 Firefox 中一切正常，但当我在移动设备(Chrome 和 Safari)上测试它时，文本字段重叠到右侧。我在 Chrome 桌面上遇到了同样的问题。

我尝试使用 clearfix，但没有用。

是否知道使用 Webkit 对我的代码应用了哪些更改可能会导致这种情况发生？

这是我的代码:http://codepen.io/anon/pen/cAqyo

重置会起作用吗？我以为 Bootstrap 包含一个，但可能还不够。

长话短说

它适用于 Firefox，但不适用于 Chrome 和移动设备 http://codepen.io/anon/pen/cAqyo

Answer 1

如果你改变

box-sizing: content-box;

到

box-sizing: border-box;

在 .fancy-input 类中，它在 Chrome 中正常工作。