요소 메타의 http-equiv 속성에 대한 잘못된 값 X-UA-Compatible


110

metaHTML5 Boilerplate가 사용하는 것과 동일한 것을 사용했으며 W3C HTML 유효성 검사기가 불평합니다.

요소 메타의 http-equiv 속성에 대한 X-UA-Compatible 값이 잘못되었습니다.

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

meta태그에 어떤 문제가 있습니까?


6
여기에 대한 멋진 블로그 게시물이 있습니다. (또한 내가 얻은 첫 번째 검색 결과 였습니다
ComFreek

답변:


67

X-UA-Compatible이 "표준"HTML ( 사양에서 참조 하는 공개적으로 편집 가능한 위키 페이지 에 나타나는 것과 관련된 FSVO "표준" )이 아니거나 유효성 검사기가 해당 위키의 현재 상태로 최신 상태가 아닙니다.

작성 당시 (20130326) X-UA-Compatible은 위키 페이지에 다음과 같은 섹션 아래에 나타납니다. "다음 제안 된 확장은 아직 HTML 사양의 모든 등록 요구 사항을 준수하지 않으므로 아직 유효하지 않습니다. 서류." 따라서 유효성 검사기는이 값을 거부하는 것이 옳습니다.


8
위키 페이지가 잘못되었습니다. 링크하는 것은에 대한 것 <meta name= ...입니다. 대한 <meta http-equiv=...페이지입니다 wiki.whatwg.org/wiki/PragmaExtensions
Alohci

6
올바른 위키 페이지에이 포함되어 X-UA-Compatible있으므로 대체 "검증 기가 최신 상태가 아닙니다"가 적용됩니다. 이 점에서 validator.nu (일반적으로 더 최신의 것으로 알려져 있음) 조차도 구식입니다.
Jukka K. Korpela 2013 년

수정 해 주셔서 감사합니다. 메타 속성 값이 두 페이지로 나뉘어져 있다는 사실을 몰랐습니다.
Quentin 2013 년

1
지원하도록 유효성 검사기를 패치하는 방법에 대한 예제는 내 대답을 참조하십시오 X-UA-Compatible. stackoverflow.com/a/21048010/1006963
darcyparker 2014 년

w3c 유효성 검사기에서 문제를 어떻게 해결할 수 있습니까? 태그를 제거 할 수 있습니까?
Krish

42

기능에 영향을주지 않고 기술적으로 유효하게 만들고 싶다면 (모든 사람이 녹색 파비콘을보고 싶어 함) "if IE"태그로 래핑 할 수 있습니다.

<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->

22
이것은 효과적으로 크롬 프레임의 무시는, 조건부 주석을 IE 참조로 크롬 프레임 지원을 비활성화 jeffreybarke.net/2010/08/...
재스퍼 Moelker

5
@JasperMoelker : 링크를 제공 한 기사에는 실제로 Chrome 프레임에 대한 해결 방법도 포함되어 있다는 사실을 언급 할 가치가 있습니다. 유효성 검사 + Chrome 프레임 지원!
Luke

5
아니 아니 아니, 이것은 X-UA 호환을 깨뜨립니다. xn--mlform-iua.no/blog/...
brentonstrine

30

한 가지 가능한 해결책은 Aaron Layton 이 작성한 멋진 글 에서 제안한 것처럼 헤더에 서버 측 수정을 구현하는 것 입니다. (모든 신용은 그에게 가야하며 표절하기보다는 의역을 할 것입니다 ...)

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

"Internet Explorer가이 줄을 발견하면 플러그인이 설치된 경우 첫 번째 Chrome 프레임에 사용되는 엔진을 변경 한 다음 Edge (브라우저에서 지원되는 가장 높은 문서 모드)로 변경합니다."

단계 :

  • 페이지 유효성 검사 수정 – 태그를 제거하면됩니다.
  • 렌더링 속도 – 브라우저가 태그를보고 모드를 변경하기를 기다리는 대신 응답 헤더로 올바른 모드를 미리 전송합니다.
  • Internet Explorer에 대한 수정 사항 만 표시해야합니다. 서버 측 브라우저 감지를 사용하고 IE에만 ​​전송합니다.

PHP에서 헤더를 추가하려면 다음을 페이지에 추가하면됩니다.

if (isset($_SERVER['HTTP_USER_AGENT']) &&
    (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false))
        header('X-UA-Compatible: IE=edge,chrome=1');


또는 다음과 같이 .htaccess 파일에 추가 할 수 있습니다.

<FilesMatch "\.(htm|html|php)$">
    <IfModule mod_headers.c>
        BrowserMatch MSIE ie
        Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
    </IfModule>
</FilesMatch>


원본 기사에 링크하고 가능한주의 사항에 대한 의견을 확인하십시오. C #에 대한 구현도 포함됩니다.

잘못된 값 X-UA-Compatible 수정

도움이 되었기를 바랍니다!


1
이 글을 쓰는 시점에서이 솔루션은 HTML5BP .htaccess 파일에 구현되어 있습니다. 따라서 Apache 서버에 mod_headers가 활성화되어 있다면 <meta>html 파일에서 제거해도 안전 합니다.
Patrick James McDougle 2014

나처럼 Spring MVC를 사용하고 있다면 여전히 매우 쉽습니다. 당신이 찾고있는 : response.addHeader("X-UA-Compatible", "IE=edge,chrome=1");, 그러나 여기에 전체 github 요점이 있습니다.
Paul Nelson Baker

1
@PatrickJamesMcDougle 이 작업을 수행하려면 Apache 서버 에서 headerssetenvif모드를 모두 활성화 해야했습니다.
iglvzx

이것이 추가되는 위치가 중요합니까? 가장 먼저해야할까요?
Staysee 2014-08-29

1
W3C HTML 유효성 검사기 관리자는 여기에 있습니다. 값에 "chrome = 1"을 입력하면이 답변의 솔루션이 더 이상 작동하지 않을 것입니다. 이후 헤더에 대한 검사도 추가했기 때문입니다 (메타 요소 검사와 함께). HTML 사양에 따라 어느 위치 (메타 요소 또는 헤더)에서든 허용되는 유일한 값은 "IE = Edge"입니다.
sideshowbarker 2015


2

..이게 좋은 대답일까요?

PHP로 HTTP 헤더 설정 :

이것은 내 작업이 아니지만 다른 사람들에게도 유용하기를 바랍니다.


7
링크 전용 답변은 사용하지 않는 것이 좋습니다 (링크는 시간이 지남에 따라 오래된 경향이 있음). 여기에 답변을 수정하고 시놉시스를 추가해보세요.
bummi

1

유효성 검사기 src 코드를 다운로드 / 빌드하면 직접 지원을 추가 할 수 있습니다.

html5-meta-X-UA-Compatible.rnc) 와 같은 파일에 다음을 추가 한 다음 html5full.rnc.

나는 이것을했고 그것은 검증을 위해 잘 작동합니다.

meta.http-equiv.X-UA-Compatible.elem =
  element meta { meta.inner & meta.http-equiv.X-UA-Compatible.attrs }
  meta.http-equiv.X-UA-Compatible.attrs =
    ( common.attrs.basic
      & common.attrs.i18n
      & common.attrs.present
      & common.attrs.other
      & meta.http-equiv.attrs.http-equiv.X-UA-Compatible
      & meta.http-equiv.attrs.content.X-UA-Compatible
      & ( common.attrs.aria.role.presentation
        | common.attrs.aria.role.menuitem
        )?
    )
    meta.http-equiv.attrs.http-equiv.X-UA-Compatible = attribute http-equiv {
      xsd:string {
        pattern = "X-UA-Compatible"
      }
    }
    meta.http-equiv.attrs.content.X-UA-Compatible = attribute content {
      xsd:string {
        pattern = "IE=((edge)|(EmulateIE(7|8|9|10))|7|8|9|10|11)(,chrome=(1|0))?"
      }
    }

common.elem.metadata |= meta.http-equiv.X-UA-Compatible.elem

0

,chrome=1제대로 작동하는 메타 태그에서 제거하십시오 . 유효성 검사기 사용 :

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

-1

나는 같은 문제가 있었고 그 전체 라인을 추가하고 둘러싸는 것이 상황을 해결했습니다.

<!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->

1
왜 반대표를 받는지 아는 사람 있나요? 실제로 유효성 검사기가 제대로 작동합니다.
Maciej Paprocki 2014-06-03

2
아마도 실제로는 아무것도 달성하지 못하기 때문일 것입니다. 1. 조건부 주석은 IE10 이상에서 작동하지 않습니다. 2. X-UA-Compatible은 최신 브라우저가 이전 브라우저를 에뮬레이트하도록 만들기위한 것입니다. 따라서이 줄이 효과적으로 말하는 것은 다음과 같습니다. 1. IE 10 & 11, 기본 모드를 사용하여 렌더링 (더 이상 조건부 주석을 구문 분석하지 않기 때문에) 2. IE 9, IE 9로 렌더링 (대부분의 경우 기본 모드). 3. IE <9, 기본 모드를 사용하여 렌더링 (최신 브라우저를 에뮬레이트 할 수 없기 때문에)
aleayr

또한 주석 안에 있기 때문에 유효성 검사기가 '올바르게'작동하게 만든다고 덧붙일 것입니다 (따라서 유효성 검사기는이를 무시합니다).
aleayr
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.