jQuery Mobile Autodivider无法正确格式化 - 使用热毛巾视图

Question

我试图让我的列表看起来像this：

但它看起来像这样：

我复制了code directly from the jQuery mobile site：

<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
    <li><a href="index.html">Adam Kinkaid</a></li>
    <li><a href="index.html">Alex Wickerham</a></li>
    <li><a href="index.html">Avery Johnson</a></li>
    <li><a href="index.html">Bob Cabot</a></li>
    <li><a href="index.html">Caleb Booth</a></li>
    <li><a href="index.html">Christopher Adams</a></li>
    <li><a href="index.html">Culver James</a></li>
</ul>

我的捆绑包有js和css文件：

bundles.Add(
              new ScriptBundle("~/scripts/vendor")
                .Include("~/scripts/jquery-{version}.js")
                .Include("~/scripts/jquery.mobile-{version}.js")

bundles.Add(
              new StyleBundle("~/Content/css")
                .Include("~/Content/ie10mobile.css")
                .Include("~/Content/jquery.mobile-{version}.css")
                .Include("~/Content/jquery.mobile.structure-{version}.css")
                .Include("~/Content/jquery.mobile.theme-{version}.css")

但是，我无法让我的列表看起来像它应该的那样。我能错过什么？

注意：在Chrome中查看F12窗口时，我没有看到任何错误，但窗口右下方有一个小警告图标：

但是当我点击它时没有任何反应。我也将相同的代码粘贴到jsfiddle.net中，它在那里工作得很好。我只是无法在我的应用程序中使用它。

编辑 - jQuery版本

编辑2 - 错误？

我在开发人员工具中注意到了这一点。这可能与它有关吗？删除线是否意味着浏览器无法加载某些内容？

编辑3 - 热毛巾结构导致问题？

如果我在index.cshtml文件中放入相同的HTML，它就可以了。但是当我尝试将它放在任何热毛巾视图（app文件夹，视图文件夹）中时，它就不会渲染。也许有些文件夹结构不允许找到css？

编辑4 - 查看源的工作时间与不工作时的源

如果我将列表放在index.cshtml上并在开发工具中检查它，我可以看到所有样式都应用了：

但是在另一个视图上（在app \ views文件夹中），它很简单：

编辑5 - index.cshtml上使用的CSS

我在index.cshtml和apps.html上有相同的列表。这些样式显示在index.cshtml上的列表中，但它们不适用于apps.html上的列表。对于apps.html来说，并不是风格被划掉了，它们就不存在了。

Answer 1

CSS是级联的，所以如果CSS有一个删除线，这意味着其他东西会覆盖它。这可能意味着有一些东西出现在同一个类之后，之前/之后出现了更精确的匹配，或者某些东西被列为！important。要了解导致它的原因，您可以查看Chrome工具的右侧，查看哪些样式来自哪里。或者，您可以向上和向下滚动显示的列表并在那里查找。

最后，你可以通过在删除线规则中添加！important来测试它是否适用（只是为了测试它）。