브라우저의 두 가지 모드quirks mode와strict mode

***1. quirks mode와strict mode는 브라우저가 css를 해석하는 두 가지 모델이거나 해석 방법이라고 할 수 있다.현재 사용 중인 브라우저는 두 가지 모드를 모두 지원합니다.2. 역사적 원인.
초기의 브라우저인 Netscape 4와 Explorer 4가 css를 분석할 때 W3C 표준을 준수하지 않았다. 이때의 해석 방식은 우리가quirks mode(괴이한 모드)라고 불렀지만 W3C의 표준이 점점 중요해지면서 많은 브라우저들이 W3C 표준에 따라 CSS를 해석하기 시작했다. W3C 표준에 따라 CSS를 해석하는 모델을 본떠서 우리는strict mode(엄격한 모드)라고 부른다.
3. 이후의 브라우저는strict mode를 지원하지만 많은 브라우저들이quirks mode 지원을 포기하지 않았다.
중요한 이유는 이전에quirksmode에서 개발된 대량의 웹 페이지가 정확하게 표시되기 위해서이다.따라서 이러한 두 가지 모델을 지원하는 브라우저가 웹 페이지를 받을 때 하는 초기 작업은 어떤 방식으로 해석할지 판단하는 것이다(판단 조건은 뒤에 말할 것이다).참고: Explorer 5는 여전히 quirks mode만 지원합니다.
4. 브라우저는 어떤 방식으로 CSS를 해석하는지 어떻게 판단합니까?
해결 방안은 doctype 성명을 사용하고 대부분의 브라우저는 아래의 판단 규칙을 사용합니다

브라우저는 오래된 웹 페이지를 정상적으로 작동하게 해야 하지만 이 부분의 웹 페이지는 doctype 성명이 없기 때문에 브라우저는 doctype 성명이 없는 웹 페이지를quirks mode로 해석한다.

doctype 설명이 있는 웹 페이지에 대해 어떤 브라우저가 어떤 방식으로 해석되는지 상세한 목록이 있습니다. 참고할 수 있습니다.http://hsivonen.iki.fi/doctype/

doctype 성명을 가진 웹 페이지에 대해 몇 가지 간단한 규칙이 있습니다.

브라우저가 인식하지 못하는doctype 성명에 대해 브라우저는strict mode 분석을 사용합니다
 
doctype 성명에서 DTD 성명을 사용하지 않거나 HTML4 이하 (HTML4 포함하지 않음) 의 DTD 성명을 사용하지 않았을 때, 기본적인 모든 브라우저는quirks mode로 나타나고, 다른것은strict mode로 해석됩니다.
이렇게 말할 수 있다. 기존에 doctype 성명이 있는 웹 페이지에서는 절대다수가strict mode로 해석된다.
i6에서 doctype 성명 앞에 xml 성명(예를 들어 )이 있으면quirks mode 해석을 사용합니다.이 규칙은 i7에서 이미 제거되었다.
5.mozilla는 almost strict moede를 제시했는데 strict mode와 차이점은 다음과 같습니다.
img 요소는strict에서 inline이고,almoststrict 모델에서는 Block입니다.사실 앞에서 말했듯이 대부분의 브라우저에서 대부분의doctype 성명은 almoststrict mode를 촉발한다.
6.quirksmode와strictmode의 가장 큰 차이점은 현재 박스 모드에 대한 해석을 제시하는 것이다. 이것은 우리가 js에서 주의해야 할 부분이다.
박스 모드란?이것은 블록급 요소를 겨냥하여 말한 것이니, 나는 여기에서 간단하게 말할 뿐이다. (상세한 내용은 관련 자료를 찾아보세요.)말하자면 블록급 요소를 물건을 담는 상자로 상상하고 Margin,padding,border,width 등 css 속성은 상자 모드를 구성한다.
 
차이점은width속성에서 발생한다.
strict mode에서 다음을 수행합니다.
width는 내용의 폭이다. 즉, 원소의 진정한 폭 = margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right;
 
quirks mode에서 다음을 수행합니다.
width는 원소의 실제 너비, 내용 너비 = width-(margin-left+margin-right+padding-left+padding-right+border-left-width+border-right-width)
여기에 상자 모드와 관련된 물건을 기록해 두고, 잊어버리지 마세요!
· 내연 원소, 예를 들어 , 등은 상하 경계를 정의하면 줄 높이(line-height)에 영향을 주지 않으며 내연 원소의 거리는 윗줄 원소의 거리가 줄 높이에 의해 결정되며 충전이나 경계가 아니라 줄 높이에 의해 결정된다.주2.내연원소(display: inline) 내연원소는 새 줄에 표시할 필요가 없고 그 후의 원소를 줄로 바꾸도록 강요하지 않는다. 예를 들어 a,em,span 등은 모두 내연원소이다.내연 원소는 다른 원소의 하위 원소가 될 수 있다.부동원소(왼쪽 또는 오른쪽 부동) 경계가 압축되지 않고 부동원소가 너비를 성명하지 않으면 그 너비는 0으로 기울어진다. 즉, 그 내용이 감당할 수 있는 최소 너비로 압축된다.상자에 내용이 없으면 너비와 높이가 100%로 정의되어 있어도 실제로는 0%에 불과하기 때문에 표시되지 않습니다. 이 점은 층 레이아웃을 할 때 특히 주의해야 합니다.경계 값은 마이너스일 수 있으며 표시 효과는 브라우저마다 다를 수 있습니다.충전치는 마이너스가 될 수 없습니다.테두리의 기본 스타일(border-style)은 표시되지 않습니다(none).7.quirksmode와strictmode에는 또 다른 차이가 있지만 검증을 거치지 않고 나는 단지 이 현상이 있음을 발견했다.strict mode에서테이블의 css 속성 font-size는 부모 요소를 계승합니다. 즉 테이블의 글꼴 크기는 부모 요소의 글꼴 크기를 계승합니다.quirks mode에서테이블의 css 속성 font-size는 부모 요소를 계승하지 않기 때문에 따로 설정해야 합니다.즉, 테이블의 글꼴 크기는 부모 요소의 글꼴 크기를 계승하지 않는다.8. js에서 현재 브라우저가 어떤 방식으로 해석되고 있는지 어떻게 판단합니까?문서 대상은 속성compatMode가 있는데 두 가지 값이 있습니다. BackCompat는quirks mode CSS1Compat는strict mode 9에 대응하고 브라우저 호환성 js 코드를 작성할 때 자주 사용하는 판단 코드(ext에서 유래)입니다. var ua = navigator.userAgent.toLowerCase(); var client = { isStrict: document.compatMode == 'CSS1Compat', isOpera: ua.indexOf('opera') > -1, isIE: ua.indexOf('msie') > -1, isIE7: ua.indexOf('msie 7') > -1, isSafari: /webkit|khtml/.test(ua), isWindows: ua.indexOf('windows') != -1 || ua.indexOf('win32') != -1, isMac: ua.indexOf('macintosh') != -1 || ua.indexOf('mac os x') != -1, isLinux: ua.indexOf('linux') != -1 }; client.isBorderBox = client.isIE && !client.isStrict; client.isSafari3 = client.isSafari && !!(document.evaluate); client.isGecko = ua.indexOf('gecko') != -1 && !client.isSafari; /** * You're not sill using IE6 are you? */ var ltIE7 = client.isIE && !client.isIE7;   10. 쓸데없는 말: 나는 현재의 많은 js 프레임워크가 왜 해석 모델에 대해 판단을 했는지 모르겠다.나는 이러한 프레임워크는 틀림없이 현재 개발하고자 하는 프로젝트에 사용되는 것이라고 생각한다. 그러면strict mode가 맞는가?페이지에doctype 성명을 붙이는 데 익숙하지 않은 분들이 많으신가요?    본문 주소:http://kino.iteye.com/blog/241260, 전재는 명기해 주십시오. 감사합니다!