4

iOS6 上的 Safari 似乎对 display:table 的处理方式不同（与 iOS5 上的 Safari 和我的 PC 上的 Safari 相比）。

在 iOS5 上，display:table强制 div 进入box-sizing: border-box mode，并忽略任何覆盖 box-sizing 的尝试。

在 iOS6 上， display:table 强制一个 div 进入box-sizing: content-box mode，并且也忽略了任何覆盖的尝试。

结果是在 iOS5 上DIV DISPLAY:TABLE WIDTH 250px PADDING-LEFT: 50PX是250px宽的，在 iOS6 上是 300px 宽。

我的问题：我对此的理解正确吗？有没有一种简单的方法可以让 DISPLAY:TABLE 的 div 和左填充在 iOS5 和 iOS6 上具有相同的宽度。

仅供参考，我使用 DISPLAY:TABLE 的原因是因为它允许我的内容进行简单的垂直居中，它具有可变的高度。

4

3 回答 3

5

以防万一将来对某人有所帮助，这个答案为我解决了这个问题。我将填充从带有样式的元素移动到带有样式的display: table;元素display: table-cell;。

于 2012-12-12T19:56:48.780 回答
2

我遇到了同样的问题，除了这个帖子之外找不到任何文档。对我来说幸运的是，原来有问题的容器不需要 table: display 属性。

但是，我确实测试了 display: table-cell 是否以与 display: table 相同的方式应用填充，但事实证明它没有。因此，也许可以尝试将 display:table 属性应用于父容器（当然没有填充）并尝试 display: table-cell 在有问题的 div 上。

于 2012-11-05T20:19:10.050 回答
1

您是否尝试添加

box-sizing: border-box

这不会对 iOS5 产生任何影响，但如果您所说的是正确的，则可能会修复 iOS6 上的显示。抱歉没有机会在iOS6上测试

于 2012-09-21T12:10:08.590 回答