CSS：Android设备中的100％宽度+填充问题

Question

在android上第二个div（橙色） 由于之前的div有一个填充，可能是第一个div，所以会更短。

100% + padding

http://jsfiddle.net/gz6kcgud/

<div style="width:100%;padding:20px;background-color:red;">in android this div is 100% + padding </div>

<div style="width:100%;background-color:orange;">and thus this div is shortened by android browser</div>

android显然将第一个div视为

100% + padding

这就是为什么当android将它们全部收缩时第二个div缩小的原因

（整个网站被android缩小，但由于第一个div被认为是100％+填充......其他一切也都缩小了）

Answer 1

那是错的......第一个div实际上扩展到超过100％宽度，第二个实际上是100％。它在桌面浏览器中也可见。

您需要使用名为box-sizing的属性来更改宽度/高度的计算方式。看看at this。

有关此主题的更多信息，请阅读有关Box model

的更多信息