html - div width 90% with 5% padding 在 iPad 上创建右边框

Question

当我制作一个宽度为 100%
的 div 时在那个 div 中，我放置了 另一个 div，宽度为 90%，它的 padding 为 5%(总共 100%)在屏幕右侧创建一个边框。

到目前为止，这个“错误”仅存在于 iPad(1 和第一个视网膜)上。不在桌面上。而不是在移动 Android 上。

当我删除

<meta name="viewport" content="width=device-width" />

或任何等效的视口(viewport)我没有这个问题。但它当然必须存在。

这是正常行为吗？还是我偶然发现了某种错误？

在网站上我使用了 Eric 的 Meyer 的 css reset，
在 fiddle 上，我使用 * {margin/padding} 重置。如果这与它有任何关系

谢谢你的帮助! :)

http://jsfiddle.net/Empi/h7ck6/

http://migueldebruyne.be/test/

Answer 1

您可以将 box-sizing: border-box; 和 width: 100%; 应用于内部 div

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#container {
    width: 100%; height: 100%;
    background-color: red;
}

#aDiv {
    width: 100%;
    padding: 5%;
    background-color: blue;
}

一个例子:http://jsfiddle.net/h7ck6/2/

我无法在您的演示站点中测试这个，但在 jsfiddle 中似乎可以在 ipad 上运行