JQuery Mobile 1.4.5 - ui-mini 被主题 css 覆盖

Question

我正在将站点从 JQM 1.2.1 更新到 1.4.5，但我似乎无法获得按钮以按正确的顺序应用具有依赖项的类 ui-mini 的样式(据我所知我知道)。

//default JQM CSS:
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

//custom theme from ThemeRoller:
<link href="https://dev.domain.com/css/themes_145/theme_145.min.css" />

//JQuery and JQM JS:
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

让事情尽可能简单，只有基本的 CDN 文件和我上面的自定义主题，以及一个里面有一个按钮的页面 div:

<div data-role="page" data-theme="a">
<a class="ui-btn ui-mini ui-icon-arrow-r ui-corner-all ui-btn-inline ui-btn-icon-left">BUTTON</a>
</div>

经过检查，我发现自定义主题 css 覆盖了 ui-mini 类提供的减小的字体大小和填充，这很奇怪，因为如果我将主题 css 移动到 JQM css 之前，主题本身被覆盖(如我所料)，但在任何其他情况下都不会应用 ui-mini 样式。自定义主题是从 Themeroller 最新下载的。

我是否以某种方式滥用了自定义主题？此设置在 1.2.1 中非常有效，我没有看到该特定部分在此版本中发生了怎样的变化。

Here's a fiddle demonstrating the issue.

我在这里被难住了。有人看出我哪里做错了吗？

Answer 1

好吧，我的结构完全错了。不得不回到 themeroller 上的说明并分别加载结构和图标包。

  <link rel="stylesheet" href="css/themes/my-custom-theme.css" />
  <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>