2013-06-04 3 views
3

jQuery Mobile 1.3 사용. 여기 내 ASP.Net MVC 페이지의 Rayzor 코드가 있습니다.jQuery Mobile 입력 체크 박스가 IE10에 두 배로 표시됩니다.

<li data-role="fieldcontain"> 
    @Html.LabelFor(m => m.RememberMe, new { data_theme = "a" }) 
    @Html.CheckBoxFor(m => m.RememberMe, new { data_theme = "a" }) 
</li> 

결과 HTML 크롬이로 렌더링뿐만 아니라 IE10에서 동일한 보이는 : enter image description here

를 지금까지 너무 좋아. 이제이 체크 박스 안을 클릭하거나 컨트롤에 탭을 걸어 SPACE를 누르면 IE가 실패하기 시작합니다. IE는 이미있는 체크 박스 위에 다른 체크 박스를 표시합니다.

enter image description here

를 잘하지! 두 브라우저의 F12 화면을 빠르게 보면 실제로이 확인란이 HTML에 있음을 알 수 있습니다. 여기가 크롬으로 강조 표시됩니다 :

enter image description here

는 CSS와 함께이를 숨길 수있는 적절한 해결책인가? 그렇다면 jQuery 버그라고 생각합니다. 나는 왜 IE가 이것을 보여주고 Chrome이 아닌지를 알 수 없다. 크롬에서는 디스플레이가 차단되도록 설정되고 zindex는 1로 설정됩니다. 따라서 크롬에서도 표시 될 것으로 기대했을 것입니다. 분명히 나는 ​​그것을 원하지 않는다. Chrome의 동작을 원한다고해도 IE가이 경우에 적합하다고 판단됩니다.

답변

2

확인란을 채우는 코드를 확인하십시오.

JQM의 체크 박스에는이 입력이 lable 위에 있습니다. 이렇게 ...

<div class="ui-checkbox"> 
    <input type="checkbox" name="checkbox-2a" id="checkbox-2a"> 
    <label for="checkbox-2a" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-on" data-theme="c" data-mini="false" class="ui-checkbox-on ui-btn ui-btn-hover-c ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-c"> 
     <span class="ui-btn-inner"> 
      <span class="ui-btn-text">Doritos</span> 
      <span class="ui-icon ui-icon-checkbox-on ui-icon-shadow">&nbsp;</span> 
     </span> 
    </label> 
</div> 
+0

고마워요! 이것은 올바른 방향으로 나를 가리켰다. 나는 상단에 나열되어있는 rayzor를 뒤집어서 체크 박스를 생성 한 다음 라벨을 생성했습니다. 이 문제가 해결되었습니다. – Paul

+0

당신은 환영 받다, 다행이다. – yeyene

관련 문제