Internet Explorer 특정 CSS 또는 Internet Explorer 특정 JavaScript 코드와 같은 특정 상황에서 Internet Explorer 10 만 대상으로 지정하려면 어떻게합니까? Internet Explorer

Internet Explorer 특정 CSS 또는 Internet Explorer 특정 JavaScript 코드와 같은 특정 상황에서 Internet Explorer 10 만 대상으로 지정하려면 어떻게합니까?

나는 이것을 시도했지만 작동하지 않는다 :

<!--[if IE 10]>    <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Internet Explorer 10은 조건부 주석을 무시하고 <html lang="en" class="no-js">대신을 사용합니다 <html class="no-js ie10" lang="en">.



답변

아마도 다음과 같은 jQuery를 사용해 볼 수 있습니다.

if ($.browser.msie && $.browser.version === 10) {
  $("html").addClass("ie10");
}

이 방법을 사용하려면이 기능이 기본 jQuery 라이브러리에서 제거되었으므로 jQuery Migrate 라이브러리를 포함해야합니다.

나를 위해 아주 잘 운동했습니다. 그러나 조건부 주석을 대체 할 수는 없습니다!


답변

스푸핑 될 수 있으므로 JavaScript navigator.userAgent또는 $ .browser (을 사용 navigator.userAgent) 를 사용 하지 않습니다 .

Internet Explorer 9, 10 및 11을 타겟팅하려면 (참고 : 최신 Chrome) :

@media screen and (min-width:0\0) {
    /* Enter CSS here */
}

Internet Explorer 10을 대상으로하려면

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS here */
}

Edge Browser를 대상으로하려면

@supports (-ms-accelerator:true) {
  .selector { property:value; }
}

출처 :


답변

사이트에서 누군가가 귀중한 의견을 가진 해결책을 찾았습니다 .

해결책은 다음과 같습니다.

if (Function('/*@cc_on return document.documentMode===10@*/')()){
    document.documentElement.className+=' ie10';
}

그것

  • 조건부 주석이 필요하지 않습니다.
  • 주석 제거 압축 / 처리 중이라도 작동합니다.
  • Internet Explorer 11에 추가 된 ie10 클래스가 없습니다.
  • Internet Explorer 10 호환 모드에서 실행되는 Internet Explorer 11에서 의도 한대로 작동 할 가능성이 높습니다.
  • 독립형 스크립트 태그가 필요하지 않습니다 (헤드의 다른 JavaScript 코드에 추가 할 수 있음).
  • 테스트하기 위해 jQuery가 필요하지 않습니다.

답변

Internet Explorer 10은 더 이상 조건부 주석을 읽지 않습니다. 이것은 다른 브라우저와 마찬가지로 조건부 주석을 처리한다는 것을 의미합니다. 일반 HTML 주석과 같이 완전히 무시됩니다. 질문에 주어진 마크 업을 예로 들어 IE10을 포함한 모든 브라우저는 회색으로 강조 표시된 주석 부분을 완전히 무시합니다. HTML5 표준은 조건부 주석 구문을 언급하지 않았으므로 이것이 IE10에서 지원을 중단하기로 선택한 이유입니다.

그러나 주석 및 최신 답변에 표시된대로 JScript의 조건부 컴파일 은 여전히 ​​지원됩니다. 최종 릴리스에서는와 달리jQuery.browser 사라지지 않습니다 . 물론 사용자 에이전트 스니핑은 그 어느 때보 다 취약하기 때문에 어떠한 상황에서도 사용해서는 안된다는 것은 말할 나위도 없습니다.

실제로 IE10을 대상으로해야하는 경우 가까운 시일 내에 계속 지원 될 수있는 조건부 컴파일을 사용하거나 도움이되는 경우 브라우저 감지 대신 (또는 이와 함께) Modernizr 와 같은 기능 감지 라이브러리를 사용하십시오 . 유스 케이스에 서버 측에서 noscript 또는 IE10을 수용하지 않는 한 사용자 에이전트 스니핑은 실행 가능한 옵션보다 골치 아픈 일입니다.

사운드 꽤 복잡하지만 기억 오늘날의 웹 표준에 매우 준수의 현대적인 브라우저와 같은 이 매우 표준을 준수하는, 당신이되어 상호 운용 코드를 작성했습니다 가정, 절대적으로 필요하지 않는 한 IE10 따로 특별한 코드를 설정해야을, 즉, 동작 및 렌더링 측면에서 다른 브라우저와 유사해야합니다. 2 IE의 역사를 감안할 때 화려하게 들리지만 Firefox 또는 Chrome이 똑같은 방식으로 실망에 빠지기를 기대 한 횟수는 몇 번입니까?

당신이 경우에 정당한 이유가있는 모든 수단이 제공 한 다른 도구와 함께 그들을 냄새에 의해, 특정 브라우저를 대상으로한다. 나는 단지 당신이 오늘날의 이유보다 오늘날 그런 이유를 찾기가 훨씬 더 힘들다는 것을 말하고 있으며, 그것은 실제로 당신이 신뢰할 수있는 것이 아닙니다.


1 IE10뿐만 아니라 IE9, 심지어 IE8까지도 Chrome보다 훨씬 더 성숙한 CSS2.1 표준을 훨씬 잘 처리합니다. IE8은 표준 준수에 초점을 맞추기 때문에 (그 당시 CSS2.1은 이미 약간의 차이만으로도 꽤 안정적이었습니다) Chrome은 최첨단 의사 표준에 대한 반 광택 기술 데모에 지나지 않습니다.

2 내가 말할 때 나는 편견이 있을지 모르지만, 분명히 그렇게한다. 코드가 IE가 아닌 다른 브라우저에서 작동 하는 경우 IE10이 아닌 자체 코드에서 문제 가능성은 3 년 전에 이전 버전의 IE와 비교할 때 훨씬 낫습니다. 다시, 나는 편견이있을 수 있지만, 솔직하게 말하자 : 당신도 그렇지 않습니까? 당신의 의견을보십시오.


답변

시작하기에 좋은 곳은 IE 표준 지원 문서 입니다.

자바 스크립트에서 IE10을 타겟팅하는 방법은 다음과 같습니다.

if ("onpropertychange" in document && !!window.matchMedia) {
...
}

CSS에서 IE10을 타겟팅하는 방법은 다음과 같습니다.

@media all and (-ms-high-contrast: none) {
...
}

IE11을 CSS를 통해 필터링하거나 재설정해야하는 경우 다른 질문을 참조하십시오.
IE 11 용 CSS 핵을 작성하는 방법?


답변

여기에 게시 된 두 솔루션 (약간 수정)이 작동합니다.

<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className='ie10';}</script><!--<![endif]-->

또는

<script>if(Function('/*@cc_on return 10===document.documentMode@*/')()){document.documentElement.className='ie10';}</script>

CSS 링크 앞에 html 페이지의 head 태그 안에 위의 행 중 하나를 포함시킵니다. 그리고 CSS 파일에서 “ie10″클래스를 부모로하는 스타일을 지정합니다 :

.ie10 .myclass1 { }

그리고 voilà! -다른 브라우저는 그대로 유지됩니다. 그리고 jQuery가 필요하지 않습니다. 내가 어떻게 구현했는지 예를 볼 수 있습니다 : http://kardash.net .


답변

나는 사용자 에이전트 스니핑과 달리 가짜가 될 수없는 간단한 방식으로 IE 10 (및 다른 모든 브라우저)을 탐지 할 수있는 Layout Engine 이라는 작은 바닐라 JavaScript 플러그인을 작성했습니다 .

렌더링 엔진 이름을 html 태그에 클래스로 추가하고 공급 업체 및 버전이 포함 된 JavaScript 객체를 반환합니다 (해당하는 경우).

내 블로그 게시물을 확인하십시오 : http://mattstow.com/layout-engine.html 그리고 GitHub에서 코드를 얻으십시오 : https://github.com/stowball/Layout-Engine