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">

これが依存するすべてのコードを送信することはできませんが、2 つのデータを提供できます。まず、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; }

これをコメントアウトすると、問題は解決します (ただし、ページはすべて間違っているように見えます)。私が知る限り、ページ サイズや div のサイズをいじる JavaScript コードはありません。

最後に、デバッガーによる、この要素の計算されたスタイルを次に示します。

-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 に答える