Jquery Mobile - Использование изображения в качестве ссылки - Синяя линия под изображением - PullRequest
1 голос
/ 07 марта 2012

Я пытаюсь использовать уменьшенные изображения в качестве кнопок в JQM. Я знаю, что JQM добавляет некоторые форматирование и стили.

У меня кнопки изображений выглядят и ведут себя точно так, как я хочу, за исключением одной вещи - на моем телефоне голубое подчеркивание добавляется ко всем изображениям, которые используются в качестве ссылок.

Некоторая информация:
-Мой телефон - Samsung Galaxy SII Skyrocket - версия Android 2.3.5
- Синяя линия не отображается в самых последних версиях Firefox, Google 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>  

Кто-нибудь знает, почему эта синяя линия появляется под миниатюрами / кнопками?

EDIT:
Вот скриншот синей линии, о которой я говорю:
http://i41.tinypic.com/2rhtvz8.png

Ответы [ 6 ]

3 голосов
/ 17 марта 2012

Разобрался. Это правило удаляет синюю линию, добавленную JQM:

.ui-li:last-child, .ui-li.ui-field-contain:last-child {
border-bottom: none !important;
}
1 голос
/ 06 августа 2012

Добавьте это на ваш <a> тег:

style="text-decoration:none;"

1 голос
/ 07 марта 2012

Вы пытались установить CSS, например

border: 0;

специально для тега IMG?

РЕДАКТИРОВАТЬ : у меня только что был похожий опыт: один белыйрамка добавлена ​​к изображению.Смотрите это jsFiddle .

Мой обходной путь (закомментированный в примере кода на jsFiddle) заключался в удалении границы из класса .ui-btn-inner.

0 голосов
/ 05 июня 2014

Перво-наперво, со всеми проблемами стиля в JQM - установите роль данных "none".

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

Это должно остановить JQM, пытающийся добавить большинство предварительно отформатированных стилей к элементу, это либо исправит вашу проблему, либо позволит вам затем стилизовать его с нуля и избежать

0 голосов
/ 09 июля 2013

Я видел этот вопрос, и мне пришлось остановиться, чтобы дать правильный ответ, и избавить меня от боли, которую я пережил более года назад, пытаясь придумать стандартный способ решения конфликтов форматирования CSS с помощью стилей JQM. Я надеюсь, что это спасет всех вас от некоторых волос, которые я потерял, когда понял это.

Решение заключается в специфике CSS. Все, что вам нужно сделать с любым конфликтом форматирования в JQM, - это сначала применить идентификатор к элементу, который вы хотите переопределить форматированием JQM с вашим собственным CSS.

Далее, в своем собственном CSS, укажите, что класс будет применен к id контейнера.

#img_button_1 .ui-btn-inner {border: none !important;}

Это так просто.

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

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

http://jsfiddle.net/Z8Xnx/14/

Еще одним дополнительным преимуществом этого подхода является то, что вам вообще не нужно изменять CSS JQM, и вы можете оставить его в покое. Я успешно использовал этот подход, чтобы разрешить каждый конфликт CSS JQM, с которым я столкнулся с момента выяснения этой проблемы требований специфики. Надеюсь, что это поможет каждому с простым решением их головоломок в стиле JQM.

** ОБНОВЛЕНИЕ **

Мне было отмечено, что этот метод не работает с последней версией JQM (1.3.0b1), и это не правильно. Я исследовал и обнаружил, что это проблема с реализацией этой версии JQM в jsFiddle. Чтобы доказать это, я разместил примерную страницу на своем собственном пространстве с тем же кодом, который показан в примере с jsFiddle. Это означает, что на момент написания статьи вы действительно не могли доверять чему-либо в jsFiddle, используя последнюю версию JQM из опций. Просто на голову, и вы можете найти рабочую реализацию на ...

Пример переопределения CSS jQuery Mobile

0 голосов
/ 07 марта 2012

Может ли это быть свойство таблицы стилей агента пользователя, которое не нормализовано?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...