jQuery Mobile Autodivider Not Formatting Correctly - Using Hot Towel Views

问题

I'm trying to get my list to look like this:

But it looks like this:

I've copied the 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>

And my bundles have the js and css files:

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")

However, I cannot get my list to look like it's supposed to. What could I be missing?

Note: When viewing the F12 window in chrome, I don't see any errors, but there is a little warnings icon at the bottom-right of the window:

But nothing happens when I click on it. I've also pasted that same code into jsfiddle.net and it works just fine there. I just can't get it to work in my app.

Edit - jQuery versions

Edit 2 - Errors?

I just noticed this in developer tools. Could this have something to do with it? Does the strikethrough mean the browser had trouble loading something?

Edit 3 - Hot Towel structure causing issue?

If I put that same HTML in my index.cshtml file, it works. But when I try to put it in any of the hot towel views (app folder, views folder) it just doesn't render. Maybe there is something about that folder structure that isn't allowing the css to be found?

Edit 4 - Viewing source for when it works vs when it doesn't

If I put the list on index.cshtml and inspect it in dev tools, I can see all of the styles applied:

But on the other view (in the app\views folder), it's just plain:

Edit 5 - CSS used on index.cshtml

I have the same list on index.cshtml and on apps.html. These styles show up for the list on index.cshtml, but they don't exist for the list on apps.html. For apps.html, it's not that the styles are crossed off, they're just not there.

回答1:

The CSS is cascading, so if the CSS has a strikethrough that means something else overrode it. That could mean something came after it that had the same class, something came before/after it that has a more precise match, or something was listed as !important. To find out what is causing it you can look at the right hand side of Chrome tools to see which styles are coming from where. Or you can scroll up and down the list that you showed and look for it there.

Finally, you can test it by adding !important to the strikethrough rules to see if they get applied (just to test it).

来源：https://stackoverflow.com/questions/18685705/jquery-mobile-autodivider-not-formatting-correctly-using-hot-towel-views