JQuery Mobile：在data-role =“content”下出现了额外的空格，黑线？

Question

我有一个页面上有两个列表。当我在iPhone 5上进行测试时，在列表下面会有一大堆额外的空白空间和一个随机的空行。 （见下图）

我没有使用页脚data-role="footer"。只需data-role="content"和data-role="page"。我尝试过使用页脚，但没有区别。

当我在网络浏览器上测试时，一切正常，所以我无法使用元素检查器找出错误。

有谁知道如何摆脱这个？ （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-->

除.yeldivider之外没有自定义CSS，它出现在两个列表之间。

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

Answer 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;
}

就像我告诉过你的那样，这只是一个猜测。

Answer 2

在这里工作正常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;
}