2

我有这种奇怪的情况，我的文档的页面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; ">

请注意，我没有设置该样式属性，它是由 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 { display: block; height: 100%; width: 100%; overflow: auto; border: none; }

如果我将此注释掉，问题就会消失（但页面看起来全错了）。据我所知，没有 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;
4

1 回答 1

2

尝试在 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>
于 2013-04-30T01:13:15.253 回答