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

Question

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

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

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

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

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

TL;博士

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

Answer 1

如果你改变

box-sizing: content-box;

至

box-sizing: border-box;

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