jquery - jQuery Mobile Autodivider 格式不正确 - 使用热毛巾视图

Question

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

但它看起来像这样：

我直接从 jQuery 移动网站复制了代码：

<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 - 热毛巾结构导致问题？

如果我将相同的 HTML 放在我的 index.cshtml 文件中，它就可以工作。但是，当我尝试将它放在任何热毛巾视图（应用程序文件夹、视图文件夹）中时，它就不会呈现。也许该文件夹结构中存在某些不允许找到 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 添加到删除线规则来测试它们是否被应用（只是为了测试它）。