Question

当我制作宽度 100％的 div 时在那个div中我放置另一个div ，宽度为 90％，填充为5％（总计100％）在屏幕右侧创建边框。

到目前为止，这个'bug'只在iPad上（1和第一视网膜）。不在桌面上。而不是移动Android。

当我删除

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

或任何等效的视口我没有这个问题。但当然必须在那里。

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

在网站上我使用 Eric的Meyer's css reset，
在小提琴上我使用 * {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上运行

div宽度为90％，5％填充在iPad上创建右边框

1 个答案: