Jquery Mobile - 使用图片作为链接 - 图片下方的蓝线答案

【问题标题】：Jquery Mobile - Using image as link - Blue line below imageJquery Mobile - 使用图片作为链接 - 图片下方的蓝线
【发布时间】：2012-03-06 22:55:36
【问题描述】：

我正在尝试将缩略图图像用作 JQM 中的按钮。我知道 JQM 添加了一些格式和样式。

我的图像按钮的外观和行为与我想要的完全一样，除了一件事 - 在我的手机上，所有用作链接的图像都添加了蓝色下划线。

一些信息：
- 我的手机是三星 Galaxy SII Skyrocket - Android 版本 2.3.5
- 最新版本的 Firefox、Google Chrome、IE 或 Safari 中不会出现蓝线。
- 该功能似乎完全按预期工作。

代码如下：

<a data-role="button" data-theme="none" data-corners="false" data-shadow="false" data-inline="true" href="/path/to/link"><img src="path_to_img" alt="Picture" /></a>

有谁知道为什么这条蓝线会出现在缩略图/按钮下方？

编辑：
这是我正在谈论的蓝线的屏幕截图：
http://i41.tinypic.com/2rhtvz8.png

【问题讨论】：

标签： jquery image mobile hyperlink formatting

【解决方案1】：

想通了。这条规则去掉了JQM添加的蓝线：

.ui-li:last-child, .ui-li.ui-field-contain:last-child {
border-bottom: none !important;
}

【讨论】：

【解决方案2】：

您是否尝试过像这样设置 CSS

border: 0;

特别是在IMG 标签上？

编辑：我刚刚有过类似的经历：在图像中添加了一个白色边框。看到这个jsFiddle。

我的解决方法（在 jsFiddle 的代码示例中注释掉）是从 .ui-btn-inner 类中删除边框。

【讨论】：

我试过了，但没有用。我尝试了从图像中删除边框的规则，基本上每个由 JQM 添加的 CSS 类。没有运气。
更新了我的答案——也许有帮助。

【解决方案3】：

将此添加到您的<a> 标签上：

style="text-decoration:none;"

【讨论】：

【解决方案4】：

它可能是一个未规范化的用户代理样式表属性吗？

【讨论】：

我真的不这么认为。从 JQM CSS 修改的唯一 CSS 是删除 .ui-btn-inner 类的填充。我尝试了有无 CSS 更改，但都没有解决 - 蓝线仍然存在。
您是否测试过消除任何可能的用户代理样式？像 a.ui-btn-inner img { 边框：无！重要 }
我尝试了一大堆（包括您刚刚发布的那个），但似乎没有一个能成功。我通过 Firebug 浏览了所有的 CSS 规则，但似乎没有一个能做到。

【解决方案5】：

我看到了这个问题，不得不停下来给出正确的答案，免去我一年多前在尝试提出一种标准方法来解决与 JQM 样式的 CSS 格式冲突时所经历的痛苦。我希望这可以为大家节省一些我在解决这个问题时失去的头发。

解决方案在于 CSS 特异性。对于 JQM 中的任何格式冲突，您需要做的就是首先将 id 应用于您希望使用自己的 CSS 覆盖 JQM 格式的元素。

接下来，在您自己的 CSS 中，指定将类应用于容器的 id。

#img_button_1 .ui-btn-inner {border: none !important;}

就这么简单。

还有一点很重要，那就是外部 CSS 文件的加载顺序很重要，您会希望在 JQM CSS 之后加载自己的 CSS。

我已经分叉了一个 Ryans jsFiddle 的工作示例，以显示他的解决方案的细微差别，在这篇文章中，至少在正确的轨道上。

http://jsfiddle.net/Z8Xnx/14/

这种方法的另一个额外好处是，您根本不必更改 JQM CSS，并且可以不理会它。我已经成功地使用这种方法来解决我遇到的每一个 JQM CSS 冲突，因为我发现了这个特定性需求问题。希望这可以帮助每个人轻松解决他们的 JQM 风格难题。

** 更新 **

我注意到这种方法不适用于最新版本的 JQM (1.3.0b1)，这是不正确的。我进行了调查，发现这是在 jsFiddle 实现此版本的 JQM 的问题。为了证明这一点，我在自己的空间中放置了一个示例页面，其代码与 jsFiddle 示例中显示的代码完全相同。这意味着在我的写作中，你真的不能相信 jsFiddle 使用选项中最新版本的 JQM 的任何东西。只是提醒一下，您可以在...上找到有效的实现。

jQuery Mobile CSS Override Example

【讨论】：

【解决方案6】：

首先要解决 JQM 上的所有样式问题 - 将数据角色设置为“无”。

<a data-role="none" href="/path/to/link"><img src="path_to_img" alt="Picture" /></a>

这应该会阻止 JQM 尝试将大多数预格式化样式添加到元素中，它可以解决您的问题或允许您从头开始设置样式并避免

【讨论】：