X-UA-Compatible이 IE = edge로 설정되었지만 여전히 호환 모드를 중지하지 않습니다

248

꽤 혼란 스러워요. 설정할 수 있어야합니다

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

IE8과 IE9는 최신 렌더링 엔진을 사용하여 페이지를 렌더링해야합니다. 그러나 방금 테스트 한 결과 사이트의 다른 곳에서 호환성 모드가 켜져 있으면 강제로 실행하지 않아도 페이지 에 그대로 유지 됩니다.

IE가 인트라넷에서도 호환 모드를 사용 하지 않도록 하려면 어떻게해야 합니까?

FWIW, HTML5 DocType 선언 ( <!doctype html>)을 사용하고 있습니다.

다음은 페이지의 처음 몇 줄입니다.

<!doctype html> 
<!--[if lt IE 7 ]> <html lang="en" class="innerpage no-js ie6"> <![endif]--> 
<!--[if IE 7 ]>    <html lang="en" class="innerpage no-js ie7"> <![endif]--> 
<!--[if IE 8 ]>    <html lang="en" class="innerpage no-js ie8"> <![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--> 
<html lang="en" class="innerpage no-js"> 
<!--<![endif]--> 
    <head> 
        <meta charset="ISO-8859-1" /> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

편집 : 방금 IE8의 기본 설정은 인트라넷 사이트에 IE7 호환성 모드를 사용하는 것입니다. 이것이 X-UA 호환 메타 태그보다 우선합니까?

internet-explorer  ie8-compatibility-mode  x-ua-compatible 
— 커릭
소스
일부 사용자들도이 문제를 겪고 있습니다. 내 앱은 인트라넷이 아닙니다. 그리고 사용자의 20 %만이 이상하게 그것을 얻습니다.
— Kevin
2
이것은 재미있는 <html> 태그 마크 업 (<!-[if lt IE 7]>)의 결과 일 수 있습니다. 그것을 제거하고 작동하는지 확인하십시오. 이 SO 질문 stackoverflow.com/questions/10682827/…
— Sunday Ironfoot
13
@SundayIronfoot 참고로, 재미있는 <html> 태그 마크 업은 조건부 IE 주석으로, 적절한 IE 버전 (해당되는 경우)에 대해 <html> 요소에 CSS 클래스를 추가하여 필요에 따라 스타일을 다르게 지정할 수 있습니다. 스타일 선언 앞에 ".ie7"을 접두어로 붙여 IE 버전의 경우 : .ie7 p {width : 200px; } ... * width 또는 _width와 같은 일부 CSS 핵을 사용하는 것보다 이전 IE 버전에서 렌더링 문제를 해결하는 것이 더 깔끔합니다. IE 이외의 브라우저는이를 무시하고 기본 브라우저 만 사용합니다.
— Tim Franklin

답변:

262

인트라넷 사이트에 대한 IE의 호환성보기 설정을 재정의해야하는 경우 web.config (IIS7) 또는 웹 사이트 속성 (IIS6)의 사용자 지정 HTTP 헤더 를 통해 X-UA-Compatible을 설정할 수 있습니다. 메타 태그는 호환성보기 설정의 IE 인트라넷 설정을 재정의하지 않지만 호스팅 서버에서 설정하면 호환성을 재정의합니다.

IIS7의 web.config 예제 :

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

편집 : clear코드를 바로 전에 제거 했습니다 add. 복사 및 붙여 넣기에 대한 불필요한 감독이었습니다. 좋은 캐치, 댓글 작성자!

— 팀 프랭클린
소스
5
그러나 참고 사항 ... 내장 Visual Studio 개발 웹 서버 (일명 Cassini)를 사용하여 개발하는 경우 Cassini가 웹의 <system.webServer> 섹션을 따르지 않기 때문에 작동하지 않습니다. 구성. 따라서 개발을 위해 IIS Express를 대신 사용하십시오.
— James Messinger
1
이유는 무엇입니까 <clear />? 이것으로 어떤 사용자 정의 헤더가 지워 집니까?
— M4N
분명한 것은 <urlCompression...>적어도 나를 위해 규칙 을 제거하는 것 같습니다 . 그 규칙은 gzipping을 수행하고 싶습니다. 추가 정보가 있으면 좋을 것입니다.
— Nenotlep
나는 '명확한'-좋은 캐치를 제거했으며, 구현에서 복사하여 붙여 넣을 때 불필요한 줄이었습니다.
— 팀 프랭클린
14
PHP :<?php header('X-UA-Compatible: IE=edge'); ?>
— Nux
183

@TimmyFranks가 자신의 답변에서 제안한 것처럼 서버 측 솔루션이 권장되지만 X-UA-Compatible페이지 수준 에서 규칙 을 구현 해야하는 경우 이미 화상을 입은 사람의 경험을 활용하려면 다음 팁을 읽으십시오.

X-UA-Compatible메타 태그는 해야한다 의 제목 후 바로 표시 <head>요소입니다. 다른 메타 태그, CSS 링크 및 js 스크립트 호출은 그 앞에 배치 할 수 없습니다.

<head>
    <title>Site Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <script type="text/javascript" src="/jsFile.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png" />
    <link rel="shortcut icon" href="https://stackoverflow.com/apple-touch-icon.png" />
</head>

어떤이있는 경우 조건부 주석 합니다 (에있는 말 할 수있는 페이지 <html>), 그들은 후, 아래에 배치해야합니다 <head>.

// DON'T: place class inside the HTML tag 
<!--[if gt IE 8]><!--> 
    <html class="aboveIe8"> 
<!--<![endif]-->

// DO: place the class inside the BODY tag
<!--[if gt IE 8]><!--> 
    <body class="aboveIe8"> 
<!--<![endif]-->

Html5BoilerPlate 팀은이 버그에 대해 다음과 같이 썼습니다 . http://h5bp.com/i/378 몇 가지 해결책이 있습니다.

인트라넷 및 호환성보기와 관련하여 도구> 호환성보기 설정으로 이동하면 설정이 있습니다.

호환성보기 설정

— 네오 SWF
소스
1
Stack Overflow에서 4 ~ 5 개의 다른 답변을 시도했지만이 특정 조합만이 효과가있었습니다. WordPress 및 SEO 플러그인을 사용하는 사람은 다른 위치에서 <title>을 다시 작성하는 플러그인에주의하십시오. 편집 : 추가 WordPress 의견
— Mike Ebert
6
X-UA-Compatible가능한 한 빨리, 아마도 이후에charset 나타나야합니다 . 나는 그것이 "제목 바로 뒤에 나타나야한다"는 것이 사실이라고 생각하지 않습니다.
— sam
이 권장 사항은 IE에서 고통을 겪은 결과입니다. 피에 의해 얻었습니다. 누가 지침에 따라 IE를 말합니까?
— neoswf
4
와우, 이것은 나를 위해 일했고 제목 태그 바로 뒤에 내 메타 태그를 갖는 것이 트릭이었습니다. 이 작품을 만드는 것이 그렇게 구식 적이 지 않았 으면 좋겠다 ...
— TheJerm
X-UA-Compatible메타 태그는 이후에 나타날 수 있습니다 title, base그 효과를 잃지 않고 다른 메타 태그입니다. 이것이 IE8에서 테스트 한 것입니다. 그러나 조건부 주석은 그 앞에 놓을 수 없습니다.
— Rockallite
37

PHP에서 제공하는 경우 다음 코드를 사용하여 수정할 수도 있습니다.

header("X-UA-Compatible: IE=Edge");
— 티제이 패
소스
4
이 방법을 사용하여 W3C 유효성 검사를 통과하고 .htaccess 해킹보다 훨씬 쉽기 때문에 메타 태그를 추가하는 것보다 낫습니다.
— Talvi Watia
2
나는 다른 모든 것을 시도했지만 이것이 마침내 효과가있었습니다. 감사합니다.
— Jason
2
워드 프레스에 사람들을 위해,이 도움이 될 수 있습니다 : codex.wordpress.org/Plugin_API/Action_Reference/send_headers을
— ambiguousmouse
이것에 따라 거대한 사이트가 구축 될 때도 훨씬 잘 작동합니다 <!--[if lt IE 7 ]> <html>...! 감사합니다! 당신은 신을 보냈습니다!
— OZZIE
2
@sunskin - PHP에 의해 모든 헤더의 보낸는 반드시 이전에 어떤 HTML 또는 데이터가 출력 PHP입니다 앞에있는 페이지 출력을 보내는 일어날.
— TJ L
25

결과적으로이 설정은로 설정되어 있어도 모든 인트라넷 사이트가 호환 모드 로 설정되도록 하는 Microsoft의 "지능형"선택 과 관련이 있습니다 .X-UA-CompatibleIE=edge

— 커릭
소스
32
그건 사실이 아니야. X-UA-Compatible은 호환성 모드 설정을 무시합니다. 그러나 때때로 메타 태그를 사용할 때 모드가 이미 설정되어 있기 때문에 메타 태그를 사용할 수 없습니다. 그렇기 때문에 HTML 헤더 버전을 사용하므로 브라우저가 프로세스 초기에 표준 모드를 ​​활성화 할 수 있습니다.
— Erik Funkenbusch 2016 년
3
Mystere Man의 의견에 추가하면 web.config 또는 IIS의 사용자 정의 http 헤더를 사용하여 호스팅 서버에서 주석을 무시할 수 있습니다. 자세한 내용은 위의 내 게시물을 참조하십시오.
— Tim Franklin
7
나는 이것을 여러 번 시도했지만 비교 모드로 강제되는 모든 인트라넷 사이트를 무시하지는 않습니다.
— Maess
@Mystere Man : 페이지가 iframe에있을 때마다 부모 문서가 XUA-COMPAT를 정의하지 않고 문서 모드가 부모 페이지에서 상속되는 경우처럼 정의하십시오 (또 다른 지능형 MS 선택).
— Stefan Steiger
1
@ Kerrick : 이것은 정답이 아닙니다. 정답은 tj111이이 아래에 답변 한 것을 참조하십시오.
— 퇴보
9

또한 로컬 호스트에 대한 IE7 문서 표준에서 동일한 IE9 렌더링 문제가 발생했습니다. 많은 조건부 주석 태그를 시도했지만 실패했습니다. 결국 나는 모든 조건부 태그를 제거하고 아래처럼 머리 바로 뒤에 메타 태그를 추가했으며 그것은 매력처럼 작동했습니다.

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

그것이 도움이되기를 바랍니다.

— 프라 모드
소스
8

"호환성보기에 인트라넷 사이트 표시"옵션을 선택 해제하고 응답 헤더에 X-UA- 호환 기능이 있어도 브라우저가 기본적으로 "호환성보기"로 설정되는 또 다른 이유는 그룹 정책입니다. 콘솔에서 다음 메시지를 확인하십시오.

HTML1203 : xxx.xxx가 그룹 정책을 통해 호환성보기에서 실행되도록 구성되었습니다.

여기서 xxx.xxx는 사이트의 도메인입니다 (예 : test.com). 이 메시지가 표시되면, 도메인에 대한 그룹 정책이 설정되어 test.com으로 끝나는 모든 사이트가 doctype, 헤더 등에 상관없이 호환성 모드로 자동 렌더링됩니다.

자세한 내용은 다음 링크를 참조하십시오 (html 코드 설명). http://msdn.microsoft.com/en-us/library/ie/hh180764(v=vs.85).aspx

— rshadman
소스
5

NEOSWF가 위에서 지적한 것처럼 Paul Irish 조건부 주석은 영향을 미치는 메타 태그를 중지합니다.

여기에 몇 가지 수정 사항이 있습니다 ( http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/ )

여기에는 다음이 포함됩니다.

서버 헤더를 사용하고 doctype 위에 조건부 주석을 추가하여 두 개의 HTML 클래스 추가

최신 프로젝트에서 Paul Irish 조건부 주석을 제거하기로 결정했습니다. 나는 먼저 테스트의 LOTS를 수행하지 않고 HTML 앞에 아무것도 추가하는 아이디어를 좋아하지 않았으며 HTML을 보면서 설정된 내용을 보는 것이 좋습니다.

결국 나는 몸 바로 뒤에 div를 둘러싸고 조건부 주석을 사용했습니다.

  <!--[if IE 7]><div class="ie7"><!--<![endif]-->
  ... regular body stuff
  <!--[if IE 7]></div><!--<![endif]-->

나는 이것을 몸 주위에서 할 수 있었지만 Wordpress와 같은 CMS에서는 더 어렵습니다.

분명히 마크 업 내부의 또 다른 DIV이지만 이전 브라우저에만 해당됩니다.

그래도 프로젝트 별 결정이 될 수 있다고 생각합니다.

나는 또한 첫 1024 바이트로 들어와야 할 charset 메타 태그에 대해 읽었습니다.

때로는 가장 단순하고 읽기 쉬운 아이디어가 가장 좋고 생각할 가치가 있습니다! 이것을 지적한 위의 링크에 대한 6 번째 의견에 감사드립니다.

— 사용자 1010892
소스
5

X-UA-Compatible브라우저 모드가 아닌 문서 모드 만 무시하고 모든 인트라넷 사이트에서 작동하지는 않습니다. 이 경우 가장 좋은 해결 방법은 "호환성보기에 인트라넷 사이트 표시"를 비활성화 하고 그룹 정책 설정 을 설정 하여 호환 모드가 필요한 인트라넷 사이트를 지정하는 것입니다.

— 토니
소스
5

htaccess 파일에 다음을 추가하여 트릭을 수행했습니다.

BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
— 메츠
소스
1
인트라넷이 호환성으로 설정되어있을 때 작동합니다. 작동하는 것을 찾기 위해 오랜 시간이 걸렸습니다. 당신이 검색하고 모든 경우에 특별히 관련 IIS를
— shorif2000
대단해. .htaccess로 헤더를 보낼 수 있다는 것을 몰랐습니다
— Alex W
3

또한 X-UA-Compatible은 헤드 섹션의 첫 번째 메타 태그 여야합니다.

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>

그런데 올바른 순서 또는 기본 헤드 태그는 다음과 같습니다.

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <title>Site Title</title>
    <!-- other tags -->
</head>

이 방법

  1. IExplorer가 처리하기 전에 렌더 엔진을 사용하도록 설정했습니다.
  2. 문서는 모든 브라우저에 사용할 인코딩을 설정했습니다.
  3. 그런 다음 제목을 인쇄하면 이미 정의 된 인코딩으로 처리됩니다.
— 레오나르도 몰리나
소스
2
실제로 CHARSET은 X-UA-Compatible보다 우선해야합니다. blogs.msdn.com/b/ieinternals/archive/2011/07/18/…
— EricLaw
1
처음 일 필요는 없지만 맨 위 근처에 있어야합니다. 제목 (및 Eric이 지적한대로 문자 세트)을 따를 수는 있지만 그것에 관한 것입니다.
— 랜스 레너드
nginx를 내 경우에는 그 것이다 X-UA 호환 태그는 헤드 섹션의 첫 번째 경우에만 작업
— 마르코 로스
2

Timmy Franks는 저에게 적합했습니다. 우리는 오늘 클라이언트가 IE8을 사용하는 곳에서 문제가 생겼으며 인트라넷을 위해 작성한 사이트를 호환 모드로 설정했습니다. "IE-Edge"를 설정하면 문제가 해결 된 것 같습니다.

<httpProtocol>
  <customHeaders>
    <clear />
    <add name="X-UA-Compatible" value="IE=Edge" />
  </customHeaders>
</httpProtocol>
— 사우스 쇼크
소스
1

IE 11에서는 더 이상 헤더를 보내서 브라우저 호환성보기 설정을 무시할 수 없습니다.

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

브라우저가 호환성보기를 사용하지 않도록 강제하는 유일한 방법은 사용자가 브라우저에서 브라우저를 사용하지 않도록 설정하는 것입니다. 당사는 인트라넷 사이트이며 기본 IE 옵션은 인트라넷 사이트에 호환성보기를 사용하는 것입니다. 얼마나 아파요!

IE 9 및 10 사용자의 브라우저 설정을 변경하지 않아도되었지만 더 이상 IE 11에서는 작동하지 않습니다. IE 사용자는 Chrome으로 전환하고 있습니다. 되었습니다.

— EricP
소스
허용 IE11되지 않으며 , 이외의 다른 호환 모드를 지원하지 않습니다 edge. 공식 문서 링크 . 즉, 주소 표시 줄에서 더 이상 CM 버튼을 숨기기 위해 해당 메타 태그를 사용할 필요가 없습니다.
— Wallace Sidhrée
4
사실이 아님 : IE11은 여전히 ​​모든 레거시 호환 모드를 지원합니다.
— EricLaw
@EricLaw, EricP의 대답이 맞습니까 (IE11이 X-UA 호환 HTTP 헤더의 동작을 변경 함)?
— Matthew Flaschen
@EricP, HTTP 헤더 또는 <meta> 태그 버전 만 사용해 보셨습니까?
— Matthew Flaschen
2
@MatthewFlaschen : 아니요. Wallace Sidhree와 마찬가지로 EricP도 올바르지 않습니다 (Wallace에게는 공정하지만 MSDN은 "더 이상 사용되지 않음"의 의미를 설명하지 않습니다). IE11에서 변경된 것은 전혀 보이지 않는 "호환성보기"단추 ( technet.microsoft.com/en-us/library/dn321449.aspx )가 없지만 X-UA 호환 선언은 여전히 ​​준수한다는 것입니다.
— EricLaw
1

PHP를 사용하여 HTML 앞에 헤더를로드하면이 문제를 해결할 수 있었고 잘 작동했습니다.

<?php 
header( 'X-UA-Compatible: IE=edge,chrome=1' );
header( 'content: width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' );
include('ix.html');
?>

ix.html은 헤더를 보낸 후로드하려는 내용입니다.

— 사용자 3071843
소스
1

IE11에서 동일한 문제가 발생했습니다. 이 답변들 중 어느 것도 내 문제를 해결하지 못했습니다. 조금 파고 들자 브라우저가 엔터프라이즈 모드 에서 실행되고 있음을 알았습니다 . (F12 키를 눌러 확인한 후 에뮬레이션 탭을 클릭하고 브라우저 프로파일 드롭 다운을 찾으십시오) 설정이 잠겨서 설정을 변경할 수 없습니다.

다음 레지스트리 키에서 CurrentVersion 을 삭제 한 후 프로파일을 데스크탑 으로 변경할 수있었습니다 .

HKEY_CURRENT_USER\Software\Policies\Microsoft\Internet Explorer\Main\EnterpriseMode

모드를 데스크톱으로 변경하면 이 게시물의 답변이 작동합니다.

— jfatal
소스
1

브라우저가 호환성 모드로 열리면 웹 브라우저 및 로컬 그룹 정책 편집기에서 모든 호환성 모드 구성을 제거하고 해제하더라도 등록 키에서 비활성화 할 수 있습니다.

이것은 또한 도메인과 하위 도메인을 사용하여 서버 측을 연결하는 경우에도 발생합니다. 머신은 모든 하위 도메인에 대해 호환 모드로 열리도록 제한되어 있습니다.

인트라넷에 대한 호환성 모드 비활성화

HKEY_LOCAL_MACHINE-소프트웨어-정책-Microsoft-Internet Explorer-BrowserEmulation-> IntranetCompalityMode 값은 0 이어야합니다 . 또한 PolicyList에서 기존 도메인 이름을 제거하십시오.

그렇지 않으면 0 값 데이터 가 포함 된 새 값 (DWORD)을 추가 할 수 있습니다 .

— 에이치 케 사멧
소스
0

많은 조합을 시도한 후에도 동일한 문제가 발생했습니다.이 작업 노트가 있었으며 인트라넷에 대해 호환성을 확인했습니다. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<head runat="server">
— Capadleman
소스
0

LAMP 스택을 사용하는 경우이를 웹 루트 폴더의 .htaccess 파일에 추가하십시오. 모든 PHP 파일에 추가 할 필요가 없습니다.

<IfModule mod_headers.c>
    Header add X-UA-Compatible "IE=Edge"
</IfModule>
— 케빈 스미스
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.