Jquery Mobile - 이미지를 링크로 사용 - 이미지 아래 파란색 선


Answers

그것을 알아 냈다. 이 규칙은 JQM이 추가 한 파란색 선을 제거합니다.

.ui-li:last-child, .ui-li.ui-field-contain:last-child {
border-bottom: none !important;
}
Question

축소판 이미지를 JQM의 단추로 사용하려고합니다. JQM이 몇 가지 서식과 스타일을 추가한다는 것을 알고 있습니다.

한 가지를 제외하고는 이미지 버튼을보고 행동해야합니다. 휴대 전화에서는 링크로 사용되는 모든 이미지에 파란색 밑줄이 추가됩니다.

일부 정보 :
- 내 전화는 삼성 갤럭시 SII 급상승입니다 - Android 버전 2.3.5
- 파란 선은 Firefox, Google 크롬, IE 또는 사파리의 최신 버전에는 나타나지 않습니다.
- 기능이 예상대로 작동하는 것 같습니다.

다음은 코드입니다.

<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>  

누구는이 파란 선이 엄지 손톱 또는 단추의 밑에 왜 나타나고 있는지 아는가?

편집하다:
다음은 내가 말하는 청색 선의 스크린 샷입니다.
http://i41.tinypic.com/2rhtvz8.png




이 질문을보고 정답을 제시하고 1 년 전에 JQM 스타일과 CSS 서식 지정 충돌을 해결하기위한 표준 방법을 찾아 내려고 애쓰면서 고통을 덜어 줘야했습니다. 이게 내가 잃어버린 머리카락 몇 개를 모두 구해 주었으면 좋겠어.

이 솔루션은 CSS 특이성에 있습니다. JQM에서 포맷팅 충돌이 발생할 때마다 JQM 서식을 사용자 정의 CSS로 덮어 쓰려는 요소에 id를 먼저 적용해야합니다.

그런 다음 자신의 CSS에서 클래스가 컨테이너의 ID 에 적용되도록 지정합니다.

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

그것만큼이나 간단합니다.

한 가지 더 중요한 점은 외부 CSS 파일의로드 순서가 중요하며 JQM CSS 이후에 자체 CSS를로드하려는 것입니다.

Ryans jsFiddle의 실제 사례를 포크로 찍었습니다.이 솔루션은 최소한이 게시물의 옳은 길이었습니다.

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

이 접근법의 또 다른 부가적인 이점은 JQM CSS를 전혀 변경할 필요가 없으며 그대로 둘 수 있다는 것입니다. 필자는이 접근법을 사용하여이 특수성 요구 사항 문제를 파악한 이후에 실행 한 모든 JQM CSS 충돌을 해결했습니다. JQM 스타일 수수께끼에 대한 쉬운 솔루션을 통해 모든 사람들을 도울 수 있기를 바랍니다.

** 업데이트 **

이 메서드는 최신 버전의 JQM (1.3.0b1)에서는 작동하지 않으며 올바르지 않습니다. 조사한 결과 jsFiddle에서 JQM의이 버전을 구현할 때 이것이 문제가되는 것으로 나타났습니다. 이를 증명하기 위해 필자는 jsFiddle 예제에 표시된 코드와 동일한 코드를 사용하여 예제 페이지를 내 공간에 배치했습니다. 이것은 내 글을 쓰는 동안 옵션에서 JQM의 최신 버전을 사용하여 jsFiddle에서 아무 것도 믿을 수 없다는 것을 의미합니다. 그냥 머리를 위로하고, 당신은에서 작업 구현을 찾을 수 있습니다 ...

jQuery 모바일 CSS 덮어 쓰기 예제




<a> 태그에 추가하십시오.

style="text-decoration:none;"




정규화되지 않은 사용자 에이전트 스타일 시트 속성 일 수 있습니까?




당신은 CSS 설정을 시도해 봤나?

border: 0;

특히 IMG 태그에?

편집 : 나는 단지 비슷한 경험을했다 : 단일 흰색 테두리가 이미지에 추가되었습니다. jsFiddle 보기.

내 해결 방법 (jsFiddle의 코드 예제에서 주석 처리 됨)은 .ui-btn-inner 클래스에서 테두리를 제거하는 것이 었습니다.




먼저 JQM의 모든 스타일 문제에 대해 먼저 데이터 역할을 "none"으로 설정합니다.

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

JQM이 미리 포맷 된 스타일을 요소에 추가하는 것을 멈추어야합니다. 문제를 해결하거나 처음부터 스타일을 수정하고 th를 피할 수있게합니다.