Question

使用$.mobile.changePage("#page2");导航时，我意识到jQM会在下一页的标题下添加1-3px的差距。

当用Cordova调用图片库来选择照片时，间隙会消失，但我不需要相机插件，我希望这个间隙不会出现在第一位。

（我不是在谈论在调用相机插件时添加到底部的白色差距 - 并且可以通过在viewWillAppear下更改MainViewController中的自我Web视图来解决 - 或者我找到的任何其他间隙问题）

我所说的差距在标题和ui内容之间。

之前我一直在使用jQM，我在过去的项目中使用的版本没有引起任何类似的问题。

我正在使用 jQM 1.4.2 ， JQuery 1.11.0 和 Cordova 3.1.0 。

这是2张图片，我改为颜色以使问题更加明显。

darkgray - ＆gt;头
红色 - ＆gt; ui-page 背景
蓝色 - ＆gt; ui-content

1张图片：无间隙 - 如果页面是INDEX页面

2 image：这是当页面是第2页并使用changePage

导航到的时候

no gap - this is if the page is the INDEX page gap - this is when the page is page 2 and gets navigated to with changePage

在标题和内容中的第一个DIV之间，您可以看到差距。

我已经注释掉了每一行代码，除了基本结构和为元素着色的代码。此外，如果它是MAIN页面，页面将无间隙显示。但是，如果我有一个不同的主页并点击调用$.mobile.changePage("#page2");的div，则第二页将显示标题和内容之间的间隙。

编辑 - 更新：

我创建了一个干净的项目只是为了重现这个问题。我不知道如何解决它，如果我无法解决这个问题，我就无法继续任何项目，因为这种情况会发生在每个项目中都有jQM 1.4.2：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />

    <link rel="stylesheet" href="jquery.mobile-1.4.2.css" />
    <script src="jquery-1.11.0.min.js"></script>
    <script src="jquery.mobile-1.4.2.js"></script>

    <script>
        $(document).on('tap', '#gotop2', function(event){
                       event.preventDefault();
                       //$.mobile.changePage('#p2');
                       $.mobile.pageContainer.pagecontainer("change", "#p2")
                       });
    </script>

</head>
<body>

    <div data-role="page" id="p1">
        <div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-id="h1">
            <h1>page 1</h1>
        </div>
        <div data-role="content" style="padding:0px; margin:0px;">

            <div id="gotop2">go to page2</div>

        </div>
    </div>


    <div data-role="page" id="p2">
        <div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-id="h1">
            <h1>page 2</h1>
        </div>
        <div data-role="content" style="padding:0px; margin:0px;">

            <div id="blueblock" style="height:20px; width:100%; background-color:#22272c; background-color:blue; padding:0px !important; margin:0px !important;"></div>

        </div>
    </div>


</body>

不要忘记在文件夹中包含jQ或jQM。

如果您在浏览器中拨打＆＃34; /index.html" 并导航到第二页，则会看到差距。

如果您直接在浏览器中拨打＆＃34; /index.html#p2" ，则不会有任何差距。

jQuery-Mobile - 标题和内容之间的GAP

编辑 - 更新：

0 个答案: