iOS6 上的 Safari 对 display:table 的处理方式不同答案

【问题标题】：Safari on iOS6 treats display:table differentlyiOS6 上的 Safari 对 display:table 的处理方式不同
【发布时间】：2012-09-21 08:33:25
【问题描述】：

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，并且忽略任何覆盖尝试。

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

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

你有没有尝试添加

box-sizing: border-box

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

【讨论】：