Question

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

我的图像按钮看起来和行为完全符合我的要求，除了一件事 - 在我的手机上，所有用作链接的图像都添加了蓝色下划线。

一些信息：
- 我的手机是三星Galaxy SII Skyrocket - Android版本2.3.5
- 最新版本的Firefox，谷歌浏览器，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

Answer 1

想出来。此规则删除JQM添加的蓝线：

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

Answer 2

您是否尝试过设置CSS

border: 0;

专门针对IMG代码？

编辑：我有类似的体验：在图片中添加了一个白色边框。请参阅此jsFiddle。

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

Answer 3

在<a>标记上添加此内容：

style="text-decoration:none;"

Answer 4

它是否是未规范化的用户代理样式表属性？

Answer 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

Answer 6

首先解决JQM上的所有样式问题 - 将数据角色设置为＆＃34; none＆＃34;。

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

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

Jquery Mobile - 使用图像作为链接 - 图像下方的蓝线

6 个答案: