Question

我的页面上有一个模态div，它会显示背景。如果我将叠加div的高度设置为100％，它在IE（桌面）上工作正常，但在iPad Safari上，完整的高度不会变灰。究竟是什么问题？它与固定位置/视口有关吗？请帮忙。下面是相同的CSS;

#TB_overlay {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
.TB_overlayBG {
    background-color: #000000;
    opacity: 0.4;
}

Answer 1

您最简单的方法就是如何为覆盖层提供最大高度宽度。像：

.overlay{
 position: fixed;
 display: none;
 top: 0;
 left: 0;
 z-index: 99;
 width: 10000px;
 height: 10000px;
 opacity: 0.5;
 background: #ccc;
}

您可以将其放在底部，即body标记之前，并在想要灰显背景时将其display更改为block。显然，无论你想在它上面显示什么，都必须有更大的z-index。希望这可以帮助。如果你不明白，请告诉我。

Answer 2

需要设置设备的高度和宽度，您可以使用iPad特定的样式来实现这一点，这样就不会破坏您的其他浏览器。

参考：http://css-tricks.com/snippets/css/ipad-specific-css/

没有看到它，很难确切地说出问题是什么，但尝试使用上面的CSS将特定的CSS应用到iPad Safari。

Answer 3

您的问题：

大多数移动浏览器会忽略position:fixed
窗口大小和视口大小的处理方式不同，因此position:absolute;...技巧也不起作用 - 您必须通过读取视口的大小来动态调整脚本中的div大小，或使其足够大以涵盖所有可能的页面大小

iPad Safari 100％高度问题

3 个答案: