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

我试图在JQM中使用缩略图作为按钮。我知道JQM增加了一些格式和样式。Jquery Mobile - 使用图片作为链接 - 图片下方的蓝线

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

一些信息：
- 我的手机是三星Galaxy SII扶摇直上 - Android版本2.3.5
-The蓝线没有出现在最新版本的火狐，谷歌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

来源

2012-03-06 user1091949

想通了。此规则删除由JQM加入蓝线：

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

来源

2012-03-17 04:21:56 user1091949

难道是一个用户代理样式表属性，不归？

来源

2012-03-06 22:59:57 max

我真的不这么认为。从JQM CSS修改过的唯一的CSS是去除.ui-btn-inner类的填充。我尝试过和没有CSS变化，它没有解决它 - 蓝线仍然存在。 – user1091949 2012-03-06 23:04:48

您是否测试过消除任何可能的用户代理样式？就像a.ui-btn-inner img {border：none！important} – max 2012-03-06 23:08:18

我试了一大堆（包括你刚刚发布的），并没有一个似乎能做到这一点。我通过Firebug完成了所有的CSS规则，而且他们都没有做到这一点。 – user1091949 2012-03-06 23:21:06

你有没有尝试设置CSS像

border: 0;

在 IMG标签

特别？

编辑：我只是有一个类似的经历：一个单一的白色边框添加到图像。请参阅jsFiddle。

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

来源

2012-03-06 23:06:21 Ryan

我试过了，并没有奏效。我试图从图像中删除边框，基本上每个CSS类都由JQM添加。没有任何运气。 – user1091949 2012-03-06 23:16:55

更新了我的答案 - 也许它有帮助。 – Ryan 2012-03-09 15:08:34

添加这对您的<a>标签：

style="text-decoration:none;"

来源

2012-08-06 05:52:24 raffyquinto

其工作，但@ user1091949答案是更优雅。 – palmplam 2012-10-02 09:06:39

我看到了这个问题，只好停下来给出正确的答案，以及备用一年前我经历的痛苦，试图提出一种解决CSS格式与JQM风格冲突的标准方法。我希望这能够拯救你们中的一些人，我失去了一些头发，然后弄清楚了这一点。

解决方案在于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风格难题。

** UPDATE **

人们已经注意到，我认为这种方法不JQM（1.3.0b1）的最新版本的工作，这是不正确的。我已经调查过，并发现这是jsFiddle中这个版本的JQM的实施问题。为了证明这一点，我在自己的空间中放置了一个与jsFiddle示例中显示的代码完全相同的代码页。这意味着从我的写作开始，你真的不能相信jsFiddle使用选项中最新版本的JQM。刚抬起头，你可以找到在工作实现...先用JQM所有样式问题

jQuery Mobile CSS Override Example

来源

2013-07-09 17:00:37 Epiphany

第一件事 - 设置数据角色为“无”。

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

这应该停止JQM想大多数预格式化的样式添加到元素，它要么解决您的问题，也不允许再从头样式起来，避免日

来源

2014-06-05 10:19:09 sidonaldson

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

回答

相关问题