2013-03-28 1 views
0

EXT.Js 프레임 워크를 사용하고 IE9에서 문제가 발생합니다 (IE8 및 이전 버전 모두 정상적으로 작동합니다) : 클릭하면 모든 체크 상자 근처에 점선으로 된 테두리가 나타납니다.체크 상자 근처에 점선으로 된 점선 IE9

body.ext-ie input{ 
    outline: none; 
} 

을하지만 그것은 작동하지 않습니다 나는 주요 CSS 파일에 설정했습니다.

나는 내 체크 박스와 관련된 레이블에 대해 생각하지만, 실제로 그것을 고치는 방법을 모른다.

내 문제의 예 :

wrong behavior in red

의 ExtJS 코드,이 체크 박스를 생성 할 수 있습니다 :

{ 
    fieldLabel: 'XXXX XXXX',  
    name: 'XXXX',     
    xtype: 'checkbox',  
    disabled: !isXXXXX} 

CSS 파일은 여기에 있습니다 : css file

UPD 1

JS :

items [{ 
    fieldLabel: 'xxx',  
    name: 'xxx',     
    xtype: 'checkbox', 
    style: {outline: 'none'}, 
    onfocus: function() {this.style.outline = "none"; } 
}] 

는 다음과 같은 HTML generetes : 16,

은 내가 ExtJS에 아래와 같은 파일을 수정 한 문서 모드 쿼크 모드 (페이지 기본값)에

<div class="x-form-check-wrap" id="ext-gen271" style="width: 180px;"> 
    <input type="checkbox" autocomplete="off" id="ext-comp-1161" name="persistentRecoveryEnabled" class=" x-form- 
checkbox x-form-field" style="outline: none;" checked=""> 
    <label for="ext-comp-1161" class="x-form-cb-label" id="ext-gen272">&nbsp;</label> 
</div> 

을 점선이 주위에 표시되는 " x-form-cb-label "이라고합니다.

문서 모드 IE9 Standart 점선이이 설정과 함께 나타나지 않습니다.

CSS 수정이 전혀 도움이되지 않습니다.

  1. 방법 JS를 통해 class="x-form-cb-label"에 스타일을 설정하려면 :

    그래서, 두 가지 질문이 있습니다?

  2. 문서 모드 IE9 Standarts를 JS로 페이지 기본값으로 설정하는 방법은 무엇입니까? 당신은 의심으로
+2

HTML/CSS를 표시하거나 [JSFiddle] (http://jsfiddle.net/)을 만드십시오. – Vucko

+0

http://pastebin.com/VW7PLm3J css 파일 –

+0

@ProtosZetZ 그리고 HTML은 어떻습니까? 원래의 질문에 포함 시키면 더 좋을 것입니다. –

답변

1

예, 그것은 당신의 분야의 label 주위 outline입니다 (HTML은 ExtJS에 의해 genereted됩니다).

outline을 숨기는 코드가 작동하지 않는 이유는 레이블이 아닌 필드 하나의 윤곽을 지정하기 때문입니다. 당신이 그것을 숨기려면

(? 당신이 우리를 표시 한 코드를 부여하지만, 나는 그것이 빈 공간이 XXXX XXXX을 말하는 것이 아니라 왜 궁금)

, 당신은 당신의 선택보다는 input으로 label를 사용한다 :

label { 
    outline: 0; 
} 

는하지만, 그것은 현재 선택된 필드 주위에 점선이 일부 사용자에게 중요한 기능 즉, 지적 가치가 그렇게하기 전에. 특히 마우스를 사용할 수없는 장애인 사용자는 키보드를 사용하여 사이트를 탐색 할 때 페이지에있는 위치를 알 수 있도록 키보드를 사용합니다.

숨기면 해당 사용자를 적극적으로 차별합니다.

+0

'label '을 사용해 보았지만 작동하지 않습니다. 조사 결과, IE9에서 'label'에 대한 몇 가지 매개 변수가 추가되었습니다 (예 : 'outline-width'가'medium '으로 설정 됨). –

0

는 시도 (사이트 청중에 따라이 특히 당신에게 중요하지만 일부 국가에서는 불법입니다 조심하지 않을 수 있습니다)이

label:focus 
{ 
    outline:none; 
} 
0

나는 style='background:#fff;border:none;' 같은 CSS를하고 국경을 제거하기 위해 좋은 일있어 사용 ie9의 checkbox 주위.

+1

Welcome to Stack Overflow! 가독성을 높이기 위해 답을 작성했습니다. – ryanyuyu

관련 문제