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

标签 jquery css html jquery-mobile

编辑:原来这是由源 HTML 中的 nbsp 引起的。我留下这个问题是希望它能帮助其他人解决同样的问题。

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

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

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

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

但是,在本地提供文件会在每组 block 的最右边的元素中产生垂直偏移。这是在本地查看时代码输出的链接(没有本地依赖项)。

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

(抱歉图片链接;SO 的 imgur uploader 不喜欢谷歌驱动器链接,而且我没有用于屏幕抓取的备用公共(public)位置)

我已经尝试了一些显而易见的事情,例如清除浏览器缓存并重新启动它。此外,当我从我的桌面提供它并在我的手机(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 中重现。

感谢任何帮助。谢谢!

最佳答案

尴尬的是,这竟然是由nbsp chars引起的。当我从 JQ Mobile Demos 粘贴网格示例时,它们进入了我的代码,而我的编辑器未配置为显示它们(现在!)。使事情更加复杂的是,JSBin 似乎有助于从粘贴的 HTML 中清除它们——这解释了为什么代码在那里工作而不是在本地工作。

关于本地和 JSBin 之间的 JQuery Mobile Grid 行为不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39110453/

相关文章:

javascript - 隐藏/显示按钮和链接交替吗?昏死

javascript - 从 JavaScript 到 Django 的实时音频流

javascript - 无法访问被点击的元素

javascript - 如何实现所需的视频背景

php - 在网站上显示 Facebook 新闻源/时间线

jQuery 返回列表元素与表列上的类单击的位置

javascript - jQuery Mobile,使用查询字符串进行导航

html - 为什么我的 div 被平板电脑上的表格弄乱了?

JQuery MagicLine 导航到下拉菜单

php - 使用 CSS 和 PHP/MySQL 的动态下拉菜单