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

【问题标题】：Chrome and Mobile not rendering the same results as Firefox - BootstrapChrome 和 Mobile 无法呈现与 Firefox 相同的结果 - Bootstrap
【发布时间】：2013-11-21 05:03:20
【问题描述】：

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

我尝试使用 clearfix 但它不起作用。

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

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

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

TL;DR

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

【问题讨论】：

标签： css google-chrome twitter-bootstrap mobile

【解决方案1】：

如果你改变了

box-sizing: content-box;

到

box-sizing: border-box;

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

【讨论】：

非常感谢！现在也可以在移动设备上使用。
很高兴我能帮上忙 :-)