입력 라디오 입력에서 [확인] CSS 선택기 내가 CHECKED 속성을 가진 라디오 버튼의 레이블에 스타일을 적용하기 위해 노력하고있어 IE7

에 일치하지 않는,하지만 난 해봤 다 IE7에 일치하는 데 실패합니다.입력 라디오 입력에서 [확인] CSS 선택기 내가 CHECKED 속성을 가진 라디오 버튼의 레이블에 스타일을 적용하기 위해 노력하고있어 IE7

예 (JSFiddle는) : (네이티브 및 IE11에서 에뮬레이트 모두)

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Title</title> 
     <style type="text/css"> 
      /* Ensure that + selectors work */ 
      input + span { color: blue; } 

      /* Try [checked] alone */ 
      input[checked] + span { color: red; } 

      /* Try selecting by value */ 
      input[checked="checked"] + span { color: green; } 
     </style> 
    </head> 
    <body> 
     <form> 
      <input type="radio" checked="checked" name="x" /><span>One</span> 
      <input type="radio" name="x" /><span>Two</span> 
      <input type="radio" name="x" /><span>Three</span> 
     </form> 
    </body> 
</html>

모든 걸쳐 '텍스트는 파란색,하지만 첫 번째는 IE7에, 빨간색이나 녹색도 아니다. JS hack-arounds가 필요합니까, 아니면이 기능을 사용하기 위해 사용할 수있는 CSS에 대한 트릭이 있습니까?

출처

2015-01-26 SuperFLEB

당신은 에뮬레이션 모드로 테스트하는 당신이 얻는하지 않는, 그래서이 일을하지만 당신은 실시간으로 테스트하는 경우 ie7 그럼 잘 작동해야합니다 ... –

이것은 이상합니다. IE7은 속성 선택 자 (적어도 기본적인 것들)를 지원합니다. 그것은 checked 속성에 특정한 것이어야합니다. checked 속성을 다른 속성 이름 (유효하거나 아님)으로 변경하면 선택기가 작동합니다. '확인'을 위해 'ed'를 삭제하고 존재 여부와 평등 선택기를 모두 삭제하십시오. 이것은 문서가 구문 분석 될 때 IE7이 defaultChecked DOM (HTML 아님) 속성을 설정하지 않는 것과 관련이 있는지 확실하지 않습니다.

인터넷 익스플로러 8 이상. IE8 모드에서 확인 된 콘텐츠 특성의 구문 분석 작업은 항상 확인 된 콘텐츠 특성과 defaultChecked DOM 특성에 영향을줍니다. 예를 들어, removeAttribute ('checked')는 checked 및 defaultChecked를 모두 false로 설정합니다. 마찬가지로 setAttribute ('checked', 'checked')는 DOM 속성을 true로 설정합니다 (요소를 다시 파싱 한 것처럼).

에서 : https://msdn.microsoft.com/en-us/library/ie/ms533715(v=vs.85).aspx

당신은 큰 필요 (많은 요소)이 Selectivizr을 시도 할 수있는 경우 - 조건 (Selectivizr가 지원하는) IE6-IE8로드 :

<!--[if (gte IE 6)&(lte IE 8)]> 
    <script type="text/javascript" src="libs/selectivizr.js"></script> 
<![endif]-->

을 사용하면 경우에만 jQuery (또는 일반 JavaScript) 이벤트 핸들러를 사용할 수있는 장소를 한 두 곳 있습니다. 이것은 일반적으로이 방법을 쓰는 방법이 아니지만 일반적으로 IE7에서는 작동하지 않습니다. 이것은 에만 IE7에서 일 하나

$('input[name="x"]').on('change', function(){ 
    $('input[name="x"]').siblings('span').removeClass('red'); 
    $(this).next('span').addClass('red'); 
});

CSS :

.red{ 
    color:red; 
}

출처

2015-01-26 21:14:10

사실, 당신은 IE8에 관한 그 비트로 대답 할 때까지 나를 이끌었습니다. "input [defaultChecked]"를 속성 이름으로 사용하면 이상하게 작동합니다. 유일한 다른 특이한 점은 JS를 사용하여 제거하는 것입니다. 특히 "removeAttribute ('defaultChecked')"를 수행해야하지만 내 용도로는 충분합니다. 감사! – SuperFLEB

입력 라디오 입력에서 [확인] CSS 선택기 내가 CHECKED 속성을 가진 라디오 버튼의 레이블에 스타일을 적용하기 위해 노력하고있어 IE7

답변

관련 문제