0

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

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

当我在网络浏览器上进行测试时，一切看起来都很好，所以我无法使用元素检查器来找出问题所在。

有人知道如何摆脱这个吗？（如果重要的话，我会在 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;
}

在此处输入图像描述

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 回答