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

Question

我使用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;} 

而对于列表视图：

<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 ..令我惊讶的是，当我改变并用border-radius查看时，它已经改变了，但没有改变为正常的边框CSS属性。

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

*补充：我意识到它只发生在背景图片属性img标签。对于div标记（使用背景图像）或img标记（没有背景图像），它不显示任何边框/轮廓。

Answer 1

将border-style: none添加到css的img标签。

img { 
    border-style: none; 
} 

应重写其他任何内容。

Answer 2

我会使用类 - 导致问题的元素。我会打开萤火虫铬鳍&萤火虫 - 并查看和检查有问题的元素，看看哪些属性正在继承。

当JQM呈现列表时，它不仅仅是列表，而是跨越内部以创建正确的效果。如果这些元素中的任何一个都在图像周围环绕，将在选择特定的CSS时会引起问题。

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

1. 我想尝试摆脱使用 萤火虫，看是否改变元素上边框内嵌的。我还会使用萤火虫来查看元素是否像我怀疑的那样继承。

2. 我会添加属性background-image：none，border：none;概述：无;作为您的 特定元素的内联样式。

3. 最后，我发现有时候，不管你做什么，你都无法重写主要风格。作为最后的手段，我使用！重要的背景图像：无！重要的;在特定元素上。