输入表现异常？

Question

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

标准的预期行为。

iOS行为

注意： 可以在http://www.draganmarjanovic.com找到该网站的实时预览 但是，这仅出现在＆lt; 720px的分辨率上。

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

Answer 1

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

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