jquery - 为什么我的页面 div 会在 ios 上永远增长(仅)？

Question

我遇到了这种奇怪的情况，我的文档的页面 div 不断地增长和增长。我在 iPhone 的 iOS 5.1 和 6 中看到过这种情况。你可以坐在 safari webkit 调试器中，看着 height 和 min-height 的值越来越大，背景图片越来越大。查看下面有效 div 中 min-height 的值。该值会增加，直到我离开或刷新页面:

<div id="divMain" data-role="page" data-cache="false" data-theme="c" data-url="divMain" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 4591px; ">

请注意，我没有设置 style 属性，它是由 jQuery 或 jQuery Mobile 以某种方式设置的。我经常看到这种情况，但不明白这是如何发生的或为什么会发生。这是我的 div 源 HTML:

<div id="divMain" data-role="page" data-cache="false" data-theme="c">

我无法提交这依赖的所有代码，但我可以提供两条数据。首先，如果我在调试器中取消选中来自 jquery.mobile-1.1.0.min.css 的 display:block 设置，问题就会停止:

.ui-mobile .ui-page-active {
display: block; /* uncheck to disable this, and the problem stops */
overflow: visible;
}

其次，(我认为这与问题有关，但我不确定)，该页面被包裹在外部iframe 中。如果我进入托管 iframe 的页面的 CSS，就会看到这一行:

iframe { 显示: block ；高度:100%；宽度:100%；溢出:自动；边框:无； }

如果我将其注释掉，问题就会消失(但页面看起来完全不对)。据我所知，没有 javascript 代码破坏页面大小或任何 div 的大小。

最后，根据调试器，这里是该元素的计算样式:

-webkit-tap-highlight-color: 
rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
background-attachment: scroll;
background-clip: border-box;
background-color: 
rgb(255, 255, 255);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: 
rgb(51, 51, 51);
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: 
rgb(51, 51, 51);
border-left-style: none;
border-left-width: 0px;
border-right-color: 
rgb(51, 51, 51);
border-right-style: none;
border-right-width: 0px;
border-top-color: 
rgb(51, 51, 51);
border-top-style: none;
border-top-width: 0px;
color: 
rgb(51, 51, 51);
display: none;
font-family: Helvetica, Arial, sans-serif;
height: auto;
left: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 38819px;
outline-color: 
rgb(51, 51, 51);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
text-align: center;
text-shadow: 
rgb(255, 255, 255) 0px 1px 0px;
top: 0px;
width: auto;

Answer 1

尝试在 iframe 周围放置一个包含 div。

<div class="container">
    <iframe src="http://mydomain.com"></iframe>
</div>

<style type="text/css">
.container{
    position: absolute; 
    top: 0px; 
    left: 0px;
    right: 0px; 
    bottom: 0px;
}
</style>