IE10은 IE7 모드로 렌더링됩니다. 표준 모드를 ​​강제하는 방법은 무엇입니까?


답변:


244

Internet Explorer는 대부분의 웹 페이지가 이전 버전의 IE를 대상으로 작성되었다고 가정하고 doctype, 메타 태그 및 HTML을 검토하여 최상의 호환성 모드를 결정합니다 (때로는 잘못됨). HTML5 doctype IE를 사용하더라도 인트라넷 사이트 인 경우 웹 사이트를 호환성 모드로 유지합니다.

웹 사이트가 항상 최신 표준 모드를 ​​사용하도록하려면 Display intranet sites in Compatibly이 기능이 꺼져 있는지 확인하십시오 . 그러나 웹 서버에 로컬 인 각 컴퓨터에서이 작업을 수행해야합니다 (지침은 아래 참조).

또는 더 나은 방법은 X-UA-Compatible헤더를 사용 하여 서버에서이 기능을 끌 수 있습니다 . 메타 태그사용하면 작동하지 않는다는 점에 유의해야 합니다.

<!-- Doesn't always work! -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

MSDN 전체에서 호스트 헤더 또는 메타 태그를 사용하면 인트라넷 사이트도 재정의해야한다고 언급되어 있습니다. Internet explorer 8의 호환성 모드 이해 기사 에는 다음 내용이 나와 있습니다.

많은 내부 비즈니스 웹 사이트가 Internet Explorer 7에 최적화되어 있으므로이 기본 예외가 해당 호환성을 유지합니다. ... 메타 태그 또는 http 헤더를 사용하여 문서에 호환성 모드를 설정하면 이러한 설정이 무시됩니다.

그러나 실제로는 작동하지 않으며 호스트 헤더를 사용하는 것이 작동하는 유일한 옵션입니다. 이 기사의 댓글 섹션에는이 정확한 문제에 대한 수많은 예가 나와 있습니다.

메타 태그를 사용하면 태그가 태그 바로 아래에 있지 않거나 <head>이전에 너무 많은 데이터가있는 경우 (4k) 태그를 무시하는 것과 같은 몇 가지 다른 문제 가 있습니다. 또한 일부 버전의 IE에서 문서가 다시 구문 분석되어 렌더링 속도가 느려질 수 있습니다. 이러한 문제에 대한 자세한 내용은 MSDN 문서 Best Practice : Get your HEAD in order에서 확인할 수 있습니다.

X-UA-Compatible 헤더 추가

.NET 및 IIS를 사용하는 경우이를 web.config 할 수 있으며 프로그래밍 방식으로도 수행 할 수 있습니다.

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="X-UA-Compatible" value="IE=edge" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

IIS를 사용하지 않는 경우 모든 언어로 쉽게 수행 할 수 있습니다. 예를 들어, 다음은 PHP에서 수행하는 방법입니다.

header('X-UA-Compatible: IE=edge');

X-UA-Compatible 헤더는 HTML5의 문서 타입을 가진 존재, 사이트는 항상 최신 표준 모드로 실행됩니다.

호환성보기 끄기 호환성보기
를 끄는 것이 여전히 유용 할 수 있습니다. 그렇게하려면Display all intranet sites in compatibility view 호환성보기 설정에서 선택을 하십시오.

호환성보기 설정

Alt메뉴를 가져 오기 위해 눌렀을 때이를 불러올 수 있습니다 .

여기에 이미지 설명 입력

편집 이 답변은 IE9에도 적용됩니다.


내 무지를 용서하십시오. 그러나이 설정 시트로 이동하는 방법은 무엇입니까? Internet Explorer 설정을 확인하고 주소 표시 줄의 호환성보기를 마우스 오른쪽 버튼으로 클릭했습니다.
firedev 2012

2
@Nick alt은 도구 모음을 불러오는 데 사용 합니다. 도구-> 호환성보기 설정 아래에 있습니다
Daniel Little

오 감사합니다. 해결 된 것 같습니다. 그들이 왜 그렇게했는지 궁금해합니다.
firedev 2011

25
+1000;). 따라서 실제로 질문을 게시하기 전에도 질문에 [IE] 태그와 "호환"이라는 단어가있는 경우 모든 OP가이 답변을 보도록 강제해야합니다.
Teemu

2
프로젝트의 web.config에 사용자 지정 헤더 섹션을 추가해 보았습니다. 설정이 인트라넷 사이트에 대한 호환성보기를 사용하기위한 IE 설정을 재정의하지 않는 것으로 보입니다.
DomenicDatti 2013-08-29

25

이거 저 한테 맞아요 ..

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

11
Lavinski가 위에서 말했듯이 NB는 "메타 태그는 인트라넷 사이트에 대해 아무 작업도하지 않습니다."
Nathan

2
X-UA-Compatible메타 태그가 있지만 여전히 IE10 표준 문서 모드를 페이지 기본값으로 트리거하지 않는 호스팅 된 웹 사이트 (비 인트라넷 사이트)의 경우 메타 태그가 스크립트 태그 아래에 있거나 <head>DOM 트리에서 너무 멀어지면 IE10이 울고 문서 모드를 IE8 표준으로 설정합니다. 따라서 IE=edge메타 태그는 태그를 닫아 두십시오 <title>. 헤더 템플릿 파일에 하드 코딩되지 않은 Wordpress 사이트에 대한 단순한 수정은 아닙니다. IE11이 메타 태그의 위치에 관심이 있는지 확실하지 않지만 이것이 누군가에게 도움이되기를 바랍니다.
purefusion 2013-10-16

1
블라인드 카피 및 저와 같은 붙여 넣는 사람에게는 닫는 태그가 없습니다. . <meta http-equiv = "X-UA-Compatible"content = "IE = edge"> </ meta>
John Newman

당신은 당신이 XHTML의 문서 타입을 사용하는 경우 메타 태그를 닫아야합니다
앤디 Brudtkuhl에게

2
또한이 태그는 첫번째 태그 내부의 <head> 할 필요가
크리스 Gunawardena

10

머리에 다음 태그를 추가해보세요

<meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8" />

5
즉해야한다 IE=Edge대신
다니엘 리틀

1
그러나 IE의 미래 버전은 뭔가 나쁜을 수행하고 사이트 파괴하는 위험이있다
Jeow 리 Huan의

7
사양을 따르면 위험하지 않습니다. 사람들이 크롬을 위해 그렇게하는 것을 볼 수 없습니다.
Daniel Little

1
이 태그는 첫번째 태그 내부의 <head> 할 필요가
크리스 Gunawardena

1
이 답변에 대한 편집은 이것이 좋은 생각이 아닌 이유를 보여줍니다. 허용되는 답변이 최상의 솔루션입니다.
David Granado 2014 년

2

메타 태그는 인트라넷 사이트에 대해 아무것도 수행하지 않으며 내 문제는 IE10 호환성 모드에서 IE10 렌더링이었습니다. 나를 위해 문제를 해결 한 것은 @Jeow의 답변을 더 취하고 web.configIIS 에서 다음을 추가하여 http 헤더에 해당 값을 사용하는 것입니다 .

<system.webServer>
  <httpProtocol> 
    <customHeaders> 
      <clear />
      <!-- <add name="X-UA-Compatible" value="IE=edge" /> not good enough -->
      <add name="X-UA-Compatible" value="IE=11,IE=10,IE=9,IE=8" /> 
    </customHeaders> 
  </httpProtocol>
</system.webServer>

IE 목적을 위해 인트라넷 사이트에는 외부로 라우팅되지 않는 공용 사이트가 포함됩니다. 예를 들어 사무실에서 근무하는 Stackoverflow 직원은 호환 모드에서 stackoverflow.com을 볼 수 있습니다.


1

다음을 수행했을 때 완벽하게 작동했습니다.

http://msdn.microsoft.com/en-us/library/gg699338(v=vs.85).aspx

첫 번째 상자에서 제공하는 정확한 예를 사용했습니다 (누락 된 </html> 아래에 을 ) IE10에서 열었고 표준이 강제되었습니다.하지만 확실하지 않은 표준을 강제하려면 html의 실제 콘텐츠가 필요할 수 있습니다.

제 제안은 빈 코드를 실제 내용 (간단한 것)으로 바꾸고 그것이 무엇을하는지 보는 것입니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.