0

2 つのリストを含むページがあります。iPhone 5 でテストすると、リストの下に大量の余分な空白スペースとランダムな空白行があります。(下の画像を参照)

フッターは使用していませんdata-role="footer"。と。data-role="content"_ data-role="page"フッターを使用してみましたが、違いはありません。

Web ブラウザーでテストすると、すべて正常に表示されるため、要素インスペクターを使用して問題を見つけることができません。

これを取り除く方法を知っている人はいますか？（psそれが重要な場合、これをCordovaで実行しています）

私のHTMLは：

   <div data-role="page" data-title="Conversation">

              <div data-role="header">
                  <a href="index.html" data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l" data-iconpos="left">Back</a>
                  <h1>Conversation</h1>
              </div><!--HEADER-->

              <div data-role="content">
                  <ul data-role="listview">
                      <li><a id="facebook" href="#"><img class="ui-li-icon" src="img/facebook.png"/>Facebook</a></li>
                      <li><a id="twitter" href="#"><img class="ui-li-icon" src="img/twitter.png"/>Twitter</a></li>
                      <li><a id="youtube" href="#"><img class="ui-li-icon" src="img/youtube.png"/>YouTube</a></li>
                      <li><a id="instagram" href="#"><img class="ui-li-icon" src="img/instagram.png"/>Instagram</a></li>
                      </ul>
                      <div class="yeldivider"></div>
                  <ul data-role="listview">
                      <li><a id="tickets" href="#"><img class="ui-li-icon" src="img/ticketsicon.png"/>Tickets</a></li>
                  </ul>

               </div><!--CONTENT-->

      </div><!--PAGE-->

.yeldivider2 つのリストの間に表示される以外のカスタム CSS はありません。

.yeldivider {
    background-color:#ffeb00;
    height: 40px;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    margin-left: -40px;
}

ここに画像の説明を入力

4

2 に答える 2

1

これは大雑把な推測ですが、コンテンツ DIV の垂直方向の伸縮に問題がある場合があります。

最悪のシナリオでは、次のように ID またはクラスを指定します。

<div data-role="content" class="cover-screen">
    //Content goes here
</div>

CSSフッターがない場合は、これを使用します。

.cover-screen {
    position: absolute;
    top: 43px !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

フッターがある場合は、次のCSSを使用します。

.cover-screen {
    position: absolute;
    top: 43px !important;
    bottom: 43px !important;
    left: 0 !important;
    right: 0 !important;
}

そして、私が言ったように、これはただの推測です。

于 2013-06-07T00:34:42.523 に答える
0

ここでDEMO http://jsfiddle.net/yeyene/SjbMd/で正常に動作し、すでにiPhoneでテストされています。

私はこれらを使用しています...

jquery.mobile-1.3.1.min.css

jquery-1.9.1.min.js 削除

jquery.mobile-1.3.1.min.js

あなたのはどうですか？

CSS

.yeldivider {
    background-color:#ffeb00;
    height: 40px;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    margin-left: -40px;
}
于 2013-06-07T03:00:52.743 に答える