我正在使用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>
问题是:它有一个轮廓,即使我添加了border:0/border:none/outline:none,我也无法摆脱它。。令我惊讶的是,当我改变并用border-radius四处查看时,它已经改变了,但不是普通的border-css属性。
如何删除背景图像周围的边框/轮廓?
*添加:我意识到这只发生在img标签的背景图像属性上。对于div标记(使用背景图像)或img标记(没有背景图像),它不显示任何边框/轮廓。
将border-style: none
添加到img
标记的css中。
img {
border-style: none;
}
应该覆盖其他任何内容。
我会使用class-导致问题的元素。我会在chrome&firebug,并查看和检查有问题的元素,查看继承了哪些属性。
当JQM渲染列表时,它不仅仅是列表,而是跨在内部以创建正确的效果。如果这些元素中的任何一个都包裹在图像周围,则将导致选择特定css时出现问题。
这就是我克服这些隆起的过程。
-
我会尝试使用firebug看看情况是否会改变。我也会使用firebug来查看元素是否像我怀疑的那样继承。
-
我会添加属性背景图像:无,边界:无;大纲:无;作为您的内联样式特定元素。
-
最后,我发现,有时,无论你做什么,你都无法覆盖主要风格。作为最后的手段,我使用!重要背景图像:无!重要的关于特定元素。