Question

编辑：结果是由源HTML中的nbsp引起的。我离开了这个问题，希望它可以帮助别人解决同样的问题。

JQuery Mobile的网格功能在本地提供或甚至将其作为文件打开时无法正常工作。

我在此消息底部粘贴的测试代码在JSBin中正常工作。这些块排列没有垂直偏移。这是JSBin链接和输出图像的链接。

http://jsbin.com/bocubeqaza/1/edit?html,output

https://drive.google.com/file/d/0BxFySp3qjVxxUkgzeUpBME9kcW8/view?usp=sharing

然后，在本地提供文件会在每组块的最右边元素中生成垂直偏移。这是在本地查看时代码输出的链接（没有本地依赖关系）。

https://drive.google.com/open?id=0BxFySp3qjVxxVkZ3czFacTdJOWM

（对不起图片链接; SO＆＃39; imgur uploader不喜欢谷歌驱动器链接，而且我没有替代公共场所进行屏幕抓取）

我已经尝试过清除浏览器缓存并重新启动它等明显的事情。此外，当我从桌面上提供并在手机上查看（Android，Chrome浏览器）时，错误行为是可重现的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />        

    <title>Sandbox</title>

    <meta name="viewport" content="width=device-width" initial-scale=1.0>


    <!-- STYLESHEETS -->    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css"> 

    <!-- Scripts -->
    <script src="http://code.jquery.com/jquery-2.2.4.js"></script> 
    <script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script> 
  </head>
  <body>

    <div data-role="page" id="sandbox">
      <div data-role="content">

        <div style="background: grey;">Foo</div>
        <div class="ui-grid-a">
            <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
            <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
        </div><!-- /grid-a -->
        <div style="background: grey;">Bar</div>
        <div class="ui-grid-b">
            <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
            <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
            <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">Block C</div></div>
        </div><!-- /grid-b -->
      </div>


</div>
  </body>
</html>

如果它有用，我今天早上在JQMobile网站上打开了一个问题：https://github.com/jquery/jquery-mobile/issues/8501。他们迅速做出反应但关闭了这个问题，因为它在JSBin中无法重现。

任何帮助表示赞赏。谢谢！

Answer 1

令人尴尬的是，事实证明这是由角色造成的。当我从JQ Mobile Demos粘贴Grid示例时，他们进入了我的代码，我的编辑器没有配置为显示它们（现在是！）。更复杂的是，JSBin似乎有助于从粘贴的HTML中擦除它们 - 这解释了为什么代码在那里工作而不是在本地工作。

JQuery Mobile Grid在本地和JSBin之间的行为不同

1 个答案: