输入行为异常？答案

【问题标题】：Inputs behaving unusually?输入行为异常？
【发布时间】：2013-12-09 16:20:15
【问题描述】：

我在用语言表达我的问题时遇到了很多麻烦，如果有人能“更好地总结一下”，我将不胜感激。无论如何，我正在设计一个表单来收集信息，因为它是针对移动设备的，我希望字段拉伸到 100%，填满屏幕。使用文本区域，这在所有移动操作系统上都可以正常工作，但是，通过使用标准，iPhone 上的布局被破坏，请注意这不会发生在 Android 上。我认为这是 Safari 的一个错误，但它适用于桌面 Safari，所以可能与 iOS 渲染有关？

标准预期行为。

iOS 行为

注意：该网站的实时预览可以在http://www.draganmarjanovic.com找到但是，这仅存在于

相同的 CSS 代码用于输入和文本区域。 - 干杯

【问题讨论】：

box-sizing:border-box;
@MLeFevre 这行得通，但为什么文本区域和输入响应不同？
我相信这是由于浏览器如何呈现表单标签，每个浏览器呈现它们略有不同。
谢谢，非常感谢。 @乔什鲍威尔
您的元素位于width:100%，但默认情况下，不同的浏览器也会为它们分配额外的填充，如果您将每个元素更改为具有padding:0px;，它可能也可以正常显示。在计算整个元素宽度时，box 模型不考虑填充，而border-box 会。因此，无论您遇到问题的浏览器，在盒子模型下，它都会生成元素width:100%;然后添加浏览器默认为该元素提供的填充。这是一篇更好的文章，而不是我蹩脚的解释 - css-tricks.com/box-sizing

标签： html ios css mobile mobile-safari

【解决方案1】：

默认情况下textarea 和input 上的填充不同（用户代理样式表），并且您没有为它们指定重置值。尝试在它们两个上设置padding:0;，它应该可以工作。

您问，当您尝试 @MLeFevre 告诉您的 box-sizing:border-box; 时，为什么它会起作用？因为这个属性的作用是将padding 算作width 而不是添加它（这是我们在CSS3 之前的正常浏览器行为）。 border 宽度也一样。因此，默认 padding 不为零并不重要，因为无论您设置什么填充，宽度都是 100%。

【讨论】：