>  기사  >  웹 프론트엔드  >  브라우저 구문 분석 모드: DOCTYPE 선언 문제 사용법에 대한 자세한 설명

브라우저 구문 분석 모드: DOCTYPE 선언 문제 사용법에 대한 자세한 설명

伊谢尔伦
伊谢尔伦원래의
2017-06-16 11:05:051531검색
웹페이지 제작 cnn6 기사 소개: IE8에는 IE5.5 이상한 모드, IE7 표준 모드, IE8 거의 표준 모드, IE8 표준 모드의 4가지 모드가 있습니다.

트리거 표준 모드

1.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< !DOCTYPE html>

2와 같은 DOCTYPE 문을 추가합니다. 2. X-UA 호환 트리거를 설정합니다.

이상한 모드 실행

1. doctype 선언 없음, 이전 HTML 버전 정의(예: 3.2)
2. XML 선언 추가, ie6
0dd1d0e47178c93e5b0c6ed7263521ab
6696bd7d107ee1b4fe3f02d4fff4771a
3. XML 선언과 XHTML의 DOCTYPE 사이에 HTML 주석을 추가합니다. 이는 ie7d83e63a465d40fb4b51924321a7cbb1b
e540b6a7318110ddcd2e3bff72b00529
bfe2946cb5cfdffb9884d7642fb4973e
5, 1ce21ff05b6519698cd23502fbc95a8b

IE8에는 4가지 모드가 있습니다: IE5.5 이상한 모드, IE7 표준 모드, IE8 거의 표준 모드, IE8 표준 모드

X-UA-Compatible 설정이 IE8 모드에 미치는 영향:
1. Meta

IE=5, IE=6(5.987654321과 같은 5에서 6 사이의 임의의 숫자): IE5 이상한 모드를 트리거합니다(페이지에 DOCTYPE이 있는지 여부에 관계없이)
IE=7(77d2edcc41483afbb3f993806bd928359 또는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그 뒤에 X-UA-Compatible을 작성하세요. "X-UA-Compatible HTTP Header"를 판단하세요.

참고 1: 2cdf5bf648cf2f33323966d7f58a7f3f 또는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그 아래에 X-UA-Compatible이 작성된 경우 X-UA-Compatible 설정이 유효하지 않습니다.
참고 2: 페이지 및 서버 HTTP 헤더가 X-UA-Compatible로 설정된 경우 페이지의 X-UA-Compatible 설정을 사용하세요. 페이지에 X-UA 호환이 없으면 HTTP 헤더에 설정된 값이 사용됩니다.
참고 3: 거의 표준 모드의 의미와 트리거는 아래 "거의 표준 모드"에 설명되어 있습니다.
참고 4: IE=xx 값의 경우 즉, xx를 가장 가까운 값으로 변환하려고 시도합니다. 예: IE=7.789 -> IE=7, 5와 6 사이 ->IE=5, 8 이상 ->IE=8.
참고 5: IE=4, IE=3, IE=0.1, IE=-7(5보다 작은 값에는 IE=IE8, IE=IE7, IE=IE6, IE=a, IE=b, IE= 포함) bcd , X-UA 호환이 없는 것과 동일합니다. X-UA-Compatible이 잘못된 값으로 설정되어 있는 것으로 이해될 수 있으므로 여기서는 건너뛰세요.

2. X-UA 호환 HTTP 헤더 설정

IE=5, IE=6: IE5 이상한 모드 트리거(페이지에 DOCTYPE이 있는지 여부에 관계 없음)
IE=7(7<= 값<8): 필수 IE7 표준(페이지에 DOCTYPE이 있는지 여부에 관계 없음)
IE=EmulateIE7: DOCTYPE을 따릅니다(DOCTYPE-IE7 표준 사용, DOCTYPE-IE5 이상한 모드 없음)
IE=EmulateIE8: DOCTYPE을 따릅니다(DOCTYPE-IE8 거의 표준 또는 IE8 표준, DOCTYPE 없음 -IE5 이상한 모드)
IE=8, IE=Edge, IE=99, IE=9.9(8 이상): doctype 사용 - doctype 없이 거의 표준 모드(또는 IE8 표준)를 사용합니다. - IE8 표준.
참고: X-UA 호환(메타 또는 http 헤더)을 설정한 후 클라이언트의 호환성 보기 설정을 덮어씁니다. "에 의해 설정된 모드를 (우선적으로) 강제로 사용합니다. "호환성 보기" 설정이 있습니다(doctype-IE7 표준, doctype-IE5 이상한 모드 없음). "호환성 보기"가 설정되지 않고, DOCTYPE-Follow doctype이 있고 doctype이 없습니다. -IE5 이상한 모드.

IE9에는 7가지 모드가 있습니다: IE5.5 이상한 모드, IE7 표준 모드, IE8 거의 표준 모드, IE8 표준 모드, IE9 거의 표준 모드, IE9 표준 모드, XML 모드

IE9와 IE8은 기본적으로 동일합니다:

X- UA-Compatible
IE=(0<= value<7) - 이상한 모드를 실행합니다(페이지에 DOCTYPE이 있는지 여부에 관계 없음). 참고: 여기의 이상한 모드는 IE8의 모드와 약간 다릅니다. 테스트에서 "-"가 발견되었습니다. 및 "_" 두 CSS 해킹 기호는 모두 IE8에서 인식되지만 "-"는 IE9에서 인식되지 않습니다.
IE=7(7IE=8(8IE=EmulateIE7, EmulateIE8 위의 IE8과 동일
IE=9, IE=Edge(값>=9) - doctype 있음 - 거의 표준 모드(또는 IE9 표준)를 사용합니다. IE8과 마찬가지로 doctype을 사용하여 IE9를 거의 표준으로 선택하거나 IE9 표준 모드를 ​​선택하지 않습니다.
IE=(value<0), IE=IE8, IE=IE7, IE=IE6, IE=a, IE=b, IE=bcd, IE=xxx는 이와 같이 신뢰할 수 없거나 X-UA 호환 메타를 넣습니다. 2cdf5bf648cf2f33323966d7f58a7f3f 또는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그 뒤에 작성됩니다. 이러한 상황은 X-UA-Compatible이 없을 때와 동일합니다. "호환성 보기" 설정이 있는 경우 먼저 "호환성 보기"를 결정합니다(doctype-IE7 표준, 문서 유형 없음 - 이상한 모드), "호환성 보기"가 설정되지 않음, DOCTYPE - 문서 유형 따르기, 문서 유형 없음 - 이상한 모드.

X-UA-Compatible을 쓰는 특별한 방법

msdn上面提到了X-UA-Compatible值设置成"IE=9; IE=8; IE=5"这样的,意思就是优先最前面的IE9,没IE9就用IE8,没IE8就IE5,并且并不推荐在生产环境下使用。
触发Google Chrome Frame:3435c5972dd88b33da7181f5cc86ec33
可以和IE的X-UA-Compatible混搭:比如:edeeb43dc591905d5529bb5165ba0baa。这样写的好处:可以让ie在最好的渲染方式下渲染页面。
"IE=edge,chrome=1",可以写成"chrome=1,IE=edge"、"chrome=1; IE=edge"。

几乎标准模式(Almost Standards Mode)

Firefox 1+、Safari、Chrome、Opera(从7.5开始)和IE8/IE9增加了一个"几乎标准模式",它实现传统的表格单元格的垂直尺寸(没有严格的遵照CSS2规范)。
意思就是,比如下面的代码:

<table style="border:1px solid blue;" cellspacing="0">
< tr><td><img style="border:1px solid red" width="364" height="126" src="http://www.google.com/images/logos/ps_logo2.png"/></td></tr>
< /table>

比如在IE7标准模式下,图片底部和table是没空白的;"几乎标准模式"下,图片底部和table也是没空白的;而较新的浏览器在标准模式下图片底部和table会有个空白。
@see:https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

下面的DOCTYPE都可触发IE8标准模式:


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< !DOCTYPE html>

触发IE8几乎标准模式:
c22098bfd3f62d7436149aaab013de1a
3c6ee2e4e556c3badc505155aae90f4f
Mac IE5、IE6/7、Opera(8f6e2fe385d7f17760ce5575dcfc3807)。
任何一个XHTML文档的解析错误会导致停止解析,FF/SF/CH/OP会直接报XML解析错误,IE9可以在开发人员工具的console里面看到报错。
MacIE5、IE6/7/8不支持application/xhtml+xml。
发现IE9下使用此模式,doctype是无所谓的,1d33348365c3ec55b420fe6254061305 这句命名空间必须的,没设置命名空间css会以文本解析而失效。
同时XML模式下,X-UA-Compatible的设置将会无效。

总结:

X-UA-Compatible只有IE>=8才识别,所以他们可以用doctype声明、X-UA-Compatible、兼容性视图设置来改变模式。
IE6/7却依靠DOCTYPE来改变标准或怪异模式,类似这些低版本的浏览器下的标准模式,接近与“先进”浏览器下的几乎标准模式,因为它们都没有严格遵循CSS2规范。并且他们同样在标准模式下,各自的渲染还是是有差别的。没差别就不会有css hack的诞生。
IE6-IE9下,怪异模式都在IE5.5下。
不需要写X-UA-Compatible,用css也完全可以搞定各个版本IE的解析不同。

模式、版本不同,不仅仅css解析不同,js的解析也有不同。
了解浏览器解析模式的不同,可以避免我们辛苦写出的标准代码被怪异所残害。
让开发者更注重遵循标准,无论在生产效率还是在协作、沟通上都有好处滴。
现在几乎人人都用标准的doctype来声明文档,所以纠结标准、怪异模式对工作的影响不太大。

위 내용은 브라우저 구문 분석 모드: DOCTYPE 선언 문제 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.