Jquery Mobile – 使用图像作为链接 – 图像下方的蓝线
我正在尝试将缩略图图像用作JQM中的按钮。 我知道JQM添加了一些格式和样式。
我有图像按钮看起来和行为完全符合我的要求，除了一件事 – 在我的手机上，蓝色下划线被添加到所有用作链接的图像。
一些信息：
– 我的手机是三星Galaxy SII Skyrocket – Android版本2.3.5
– 最新版本的Firefox，Google Chrome，IE或Safari中没有出现蓝线。
– function似乎完全按预期工作。
这是代码：
有谁知道为什么这条蓝线出现在缩略图/按钮下面？
编辑：
这是我正在谈论的蓝线的截图：
http://i41.tinypic.com/2rhtvz8.png
弄清楚了。 此规则删除JQM添加的蓝线：
.ui-li:last-child, .ui-li.ui-field-contain:last-child { border-bottom: none !important; }
你尝试过设置CSS吗？
border: 0;
特别是关于IMG标签？
编辑 ：我刚刚有类似的经历：一个白色边框添加到图像。 看到这个jsFiddle 。
我的解决方法（在jsFiddle的代码示例中注释掉）是从.ui-btn-inner类中删除边框。
它可能是未规范化的用户代理样式表属性吗？
我看到了这个问题，并且不得不停下来给出正确的答案，并且不遗余力地在一年多之前试图找到一种标准方法来解决与JQM样式的CSS格式冲突。 我希望这能为你们节省一些我丢失的头发，然后把它弄清楚。
解决方案在于CSS特异性。 您需要对JQM中的任何格式冲突做的就是首先将id应用于您希望使用自己的CSS覆盖JQM格式的元素。
接下来，在您自己的CSS中，指定将该类应用于容器的id 。
#img_button_1 .ui-btn-inner {border: none !important;}
就这么简单。
更重要的是，外部CSS文件的加载顺序很重要，您需要在 JQM CSS 之后加载自己的CSS。
我已经分享了一个Ryans jsFiddle的工作示例，以显示他的解决方案的微小差异，这至少在这篇文章的正确轨道上。
使用这种方法的另一个好处是，您根本不必更改JQM CSS，并且可以不管它。 我已经成功地使用这种方法来解决我在解决这个特定要求问题时遇到的每个JQM CSS冲突。 希望这可以帮助每个人轻松解决他们的JQM风格难题。
** 更新 **
我已经注意到，这种方法不适用于最新版本的JQM（1.3.0b1），这是不正确的。 我已经调查过，发现这是jsFiddle中这个版本的JQM的一个问题。 为了certificate这一点，我在自己的空间上建立了一个示例页面，其代码与jsFiddle示例中显示的完全相同。 这意味着在我的写作中，你真的不能相信jsFiddle的任何东西使用选项中最新版本的JQM。 只是一个抬头，你可以找到工作实现…
jQuery Mobile CSS覆盖示例
首先是JQM上的所有样式问题 – 将数据角色设置为“none”。
这应该会阻止JQM尝试将大多数预格式化的样式添加到元素中，它可以解决您的问题，也可以让您从头开始设置样式并避免