asp.net-mvc - jQuery Mobile 1.3.x 和 ASP.NET MVC 4 Razor 的 ListView 渲染问题

Question

在 Internet Explorer 9/10 和 IE 8 手机上，jQuery Mobile 1.3.x ListView 呈现不正确的问题。它可以在 Chrome、Safari、iOS 上的 Safari 和 IE 9/10 上的 jQuery Mobile 1.2.1 上正确呈现。我在 Win7 上运行 VS 2012、C#、MVC 和 Razor。

要使用 VS 2012 进行重现，请使用 Razor 生成 ASP.NET MVC 4 移动项目，然后使用 NuGet 升级到 jQuery Mobile 1.3.0 或 1.3.1。

主页上的这段代码在列表项和左边框上的项目符号之间有额外的空间:

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

升级前: https://dl.dropboxusercontent.com/u/47974701/Capture%20B4.PNG

升级到 1.3.0 jQuery Mobile 后: https://dl.dropboxusercontent.com/u/47974701/Capture%20After.PNG

Answer 1

将脚本 block 移动到 HEAD 部分可以解决此问题。由于其他原因它并不理想(出于性能/优化原因它位于页面底部)，但它修复了 IE 未正确初始化的问题。

    @Scripts.Render("~/bundles/jquery")
    <script>
        $(document).on("mobileinit", function () {
            $.mobile.ajaxEnabled = false;
        });
    </script>
    @Scripts.Render("~/bundles/jquerymobile")
</head>