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

Posted 2023-05-09

【中文标题】JQuery Mobile 1.4.5 - 被主题 css 覆盖的 ui-mini

【英文标题】：JQuery Mobile 1.4.5 - ui-mini overridden by theme css

【发布时间】：2018-09-27 18:14:13

【问题描述】：

我正在将一个站点从 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.

我被难住了。有人知道我哪里做错了吗？

【问题讨论】：

我看到了，根据这次对话：forum.jquery.com/topic/upgrading-jquery-mobile-1-2-0-to-1-4-5 你不打算同时领导 JQM CSS 和主题......但是 JQM 不能只与主题 css 一起工作.这是我从 1.2.1 开始所期望的行为（主题仅用于配色方案和视觉呈现，而不是字体大小之类的东西——我什至在 ThemeRoller 中都没有看到该选项），所以我我不确定断言是否正确。

【参考方案1】：

好的，我的结构完全错误。不得不回到主题滚轮上的说明并分别加载结构和图标包。

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