jQuery Mobile 自动分隔符格式不正确 - 使用 Hot Towel View

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 - Hot Towel 结构导致问题？

如果我将相同的 HTML 放入我的 index.cshtml 文件中，它就可以工作。但是，当我尝试将其放入任何 Hot Towel View (应用程序文件夹、 View 文件夹)时，它只是不渲染。也许该文件夹结构中有一些不允许找到 css 的东西？

编辑 4 - 查看源代码何时有效，何时无效

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

但在另一个 View 上(在 app\views 文件夹中)，它很简单:

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

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

Answer 1

CSS 是级联的，因此如果 CSS 有删除线，则意味着其他内容会覆盖它。这可能意味着在它之后出现的东西具有相同的类，在它之前/之后出现的东西具有更精确的匹配，或者某些东西被列为!重要。要找出导致此问题的原因，您可以查看 Chrome 工具的右侧，看看哪些样式来自何处。或者您可以上下滚动您显示的列表并在那里查找它。

最后，您可以通过在删除线规则中添加 !important 来测试它，看看它们是否得到应用(只是为了测试它)。