三星 Android 设备的 JQM/openlayers 导航栏选择

Question

我有一个使用 openlayers 进行映射的 jquery-mobile/phonegap 应用程序。在使用地图的页面上，见下图，我在选择页脚菜单时遇到问题。

例如，如果我选择主页，应用程序将导航到捕获。这只发生在显示地图的页面上。我在 openlayers 中使用 map.render 函数，因为地图在多个屏幕之间共享。如果我删除渲染功能，菜单会按预期工作。

我添加了一个点击函数来查看有问题的点击的x位置，并注意x位置反映了导航到的页面菜单的位置，而不是点击的菜单。

菜单如下：

  <div class="menu" data-role="footer" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li>
          <a href="index.html"
             class="home-button"
             data-icon="custom">Home</a>
        </li>
        <li>
          <a href="map.html"
             class="map-button ui-btn-active"
             data-icon="custom">Map</a>
        </li>
        <li>
          <a href="capture.html"
             class="capture-button"
             data-icon="custom">Capture</a>
        </li>
        <li>
          <a href="download.html"
             class="download-button"
             data-icon="custom">Download</a>
        </li>
      </ul>
    </div>

如果我删除 data-role="footer" div，导航栏菜单将按预期工作。

注意：这仅在使用 android 2.3.5 的三星设备上重现。我在带有 android 2.3.6、4+ 和我们测试过的所有其他型号的三星设备上运行良好。

使用： 开放层 1.12 jquery-mobile：1.2.0（也试过1.3.0）

Answer 1

设置页脚的 z-index 解决了这个问题：

.ui-footer {
    z-index: 10000;
}