jQuery Mobile在图像背景周围显示边框/轮廓

时间:2012-01-16 02:59:28

标签: image jquery-mobile

我正在使用jQuery Mobile构建移动网站,我有一个列表视图,显示着陆页上每个菜单的图标。

我通过背景图像显示图标,背景位置在img标签上(使用精灵图标):

.ui-li-icon {top:10px;left:25px;}
.iconhome {background: transparent url(../images/icons.png) no-repeat;margin:7px 15px 0 0;width:21px;height:22px;}
#i-travel {background-position:-4px -3px;}

对于listview:

<ul data-theme="c" data-role="listview">
<li><a href="step1.html"><img class="iconhome ui-li-icon" id="i-travel"></img>Travel and Fly<br><span class="small gray">Buy Travel Insurance</span></a></li>
</ul>

问题:它有一个轮廓,我无法摆脱它虽然我添加了边框:0 / border:none / outline:none ..令我惊讶的是,当我改变并环视边界半径时,它被改变了但不是正常的边界css属性。

如何删除背景图像周围的边框/轮廓?

*已添加:我意识到这只发生在img tag 上的 background-image属性上。对于div标签(使用背景图像)或img标签(没有背景图像),它不显示任何边框/轮廓。

2 个答案:

答案 0 :(得分:0)

border-style: none添加到img标记的CSS中。

img {
   border-style: none;
}

应该覆盖其他任何内容。

答案 1 :(得分:0)

我会使用class - 导致问题的元素。我会在chrome&amp ;;中打开萤火虫firebug - 查看并检查有问题的元素,看看哪些属性被继承。

当JQM呈现列表时,它不仅仅是列表,而是跨越内部以创建正确的效果。如果这些元素中的任何一个环绕图像,导致选择特定CSS的问题。

这是我用来克服这些驼峰的过程。

  1. 我会尝试使用在元素上删除内联边框 萤火虫看看是否有变化。我也会使用firebug来查看元素是否像我怀疑的那样继承。

  2. 我要添加属性background-image:none,border:none;概述:无;作为你的内联风格 特别要素。

  3. 最后,我有时发现,无论你做什么,都不能覆盖主要风格。作为最后的手段,我使用!important background-image:none!important;关于具体要素。