Html 输入行为异常？

我很难用语言表达我的问题，如果有人能“更好地总结”，我将不胜感激。不管怎样，我正在设计一个表单来收集信息，因为它是针对移动设备的，我希望字段能够扩展到100%，填满屏幕。使用文本区域，这在所有移动操作系统上都可以正常工作，但是，如果使用标准，iPhone上的布局会被破坏，请注意，Android上不会出现这种情况。我相信这是Safari的一个bug，但它在桌面Safari中工作，所以可能与iOS渲染有关

标准预期行为

iOS行为

注: 该网站的实时预览可在以下网址找到：

---

但是，这仅在分辨率为时出现，

textarea

和

input

上的填充默认情况下是不同的（用户代理样式表），并且您没有为它们提供重置值。尝试设置

填充：0

在这两种情况下都应该有效

---

当您尝试

框大小：边框框

正如@MLeFevre告诉你的，你会问吗？因为这个属性的作用是使

填充

作为

宽度

计算，而不是作为它的一个附加项（这是我们在CSS3之前的正常浏览器行为）。它对

边框

宽度也有同样的作用。因此，默认的

padding

不是零并不重要，因为不管您设置什么padding，宽度都是100%。

默认情况下，

textarea

和

input

上的padding是不同的（用户代理样式表），并且您没有为它们指定重置值。尝试设置

填充：0

在这两种情况下都应该有效

---

当您尝试

框大小：边框框

正如@MLeFevre告诉你的，你会问吗？因为这个属性的作用是使

填充

作为

宽度

计算，而不是作为它的一个附加项（这是我们在CSS3之前的正常浏览器行为）。它对

边框

宽度也有同样的作用。因此，默认的

padding

不是零并不重要，因为不管设置什么padding，宽度都是100%@mlefvre这是可行的，但为什么文本区域和输入响应不同？我相信这是由于浏览器呈现表单标记的方式不同，每个浏览器呈现的表单标记略有不同。谢谢，非常感谢@Josh Powell您的元素的宽度为

width:100%

，但是如果您将每个元素更改为具有

padding:0px，则默认情况下，不同的浏览器也会为它们分配额外的填充它可能也会显示良好。长方体模型在计算整个图元宽度时不考虑填充，而边框长方体则考虑填充。因此，无论您使用什么浏览器，在长方体模型下，它都会使元素
width:100%框大小：边框框
@mlefvre这是可行的，但为什么文本区域和输入响应不同？我相信这是由于浏览器呈现表单标记的方式不同，每个浏览器呈现的表单标记略有不同。谢谢，非常感谢@Josh Powell您的元素的宽度为
width:100%
，但是如果您将每个元素更改为具有
padding:0px，则默认情况下，不同的浏览器也会为它们分配额外的填充它可能也会显示良好。长方体模型在计算整个图元宽度时不考虑填充，而边框长方体则考虑填充。因此，无论您使用什么浏览器，在长方体模型下，它都会使元素
width:100%