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>

经过检查，我看到ui-mini类提供的缩小的字体大小和填充被自定义主题css覆盖，这很奇怪，因为如果我在JQM css之前移动主题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>

JQuery Mobile 1.4.5 - 由主题css覆盖的ui-mini

1 个答案: