jQuery Mobile показывает границу / контур вокруг фона изображения

Question

Я использую jQuery Mobile для создания мобильного веб-сайта, и у меня есть просмотр списка, в котором отображаются значки для каждого меню на целевой странице.

Я отображаю значок через background-image с background-position на теге 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 css.

Как мне удалить границу / контур вокруг моего фонового изображения?

* Добавлено: я понял, что это происходит только в свойство background-image в теге img . Для тега div (с использованием background-image) или тега img (без background-image) он не отображает границы или контур.

Answer 1

Я бы использовал class - элемент, который вызывает проблему.Я бы открыл Firebug в Chrome и Firebug - и посмотреть и осмотреть нарушающий элемент и посмотреть, какие свойства наследуются.

Когда JQM рендерит списки, это не только списки, но и внутри, чтобы создать правильный эффект.Если какой-либо из этих элементов обернут вокруг изображения, он БУДЕТ вызвать проблему при выборе вашего конкретного CSS.

Это процесс, который я использую, чтобы преодолеть эти горбы.

1. Я бы попытался избавиться от встроенной границы элемента, используя firebug, чтобы посмотреть, изменится ли это.Я также использовал бы firebug, чтобы видеть, наследуются ли элементы, как я подозреваю.

2. Я бы добавил свойство background-image: нет, border: нет;не очертить: нет;как встроенный стиль для вашего конкретного элемента.

3. Наконец, я иногда обнаруживал, что независимо от того, что вы делаете, вы не можете переопределить основной стиль.В качестве последнего средства я использую! Важное фоновое изображение: нет! Важно;на конкретный элемент.

Answer 2

Добавьте border-style: none к css для img тегов.

img {
   border-style: none;
}

Должен переопределить все остальное.