爲什麼我的頁面div會在ios（only）上永遠增長？

我有這個奇怪的情況，我的文檔的頁面div增長並永遠增長。我已經在iOS 5.1和6上看到了這一點。您可以坐在safari webkit調試器中觀察高度和最小高度的值，並且背景圖像變得越來越大。在下面的有效div中查看min-height的值。該值將增加，直到我離開或刷新頁面：爲什麼我的頁面div會在ios（only）上永遠增長？

<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設置，問題停止：

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

二，（我認爲這是有關到問題，但我不知道），這個頁面被包裹在一個外部iframe。如果我進入CSS爲承載的iframe頁面，有這樣一行：

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;

來源

2013-04-29 Brian Colavito

刪除'data-cache = false'默認爲false。你正在使用哪個版本的jquery和JQM？ – Omar 2013-04-29 17:45:03

JQM 1.1.0。我刪除了data-cache = false，並沒有任何影響。 – 2013-04-29 18:48:28

請查閱http://www.cjboco.com/blog.cfm/post/prevent-apple-s-safari-browser-from-caching-an-iframes-source-or-url/ – Omar 2013-04-29 21:21:04

嘗試把一個包含分區周圍的iframe。

<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-30 01:13:15 Aaron

爲什麼我的頁面div會在ios（only）上永遠增長？

回答

相關問題