Home > Article > Web Front-end > DTD and pattern_html/css_WEB-ITnose
DTD and pattern_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:54:121192browse
Summary
What we must test when making pages is the IE browser. After all, the IE browser still has a high market share. With the popularity of HTML5, projects may require that the minimum version compatible with IE is IE8 or higher, but there are still many projects that are compatible with lower versions of IE. Therefore, we often encounter the problem of page layout being disordered in lower versions of IE browser. This is because IE browser has two modes that affect the page. Now let’s study
Document Verification Mechanism (DTD)DTD is the verification mechanism of HTML files and is part of the composition of HTML files. Three document types: S (Strict), T (Transitional), F (Frameset).
Clean markup to avoid clutter in the presentation layer.
DTD can contain rendering attributes and elements that the W3C expects to be moved into style sheets. Use
DTD should be used for documents with frames if your readers are using browsers that do not support Cascading Style Sheets (CSS) and you have to use the rendering features of HTML. Except that the frameset element replaces the body element, the Frameset DTD is equivalent to the Transitional DTD
HTML5 simplifies the DTD and can be used directly fef50554eca1a427827adaa329da8122.
ModeThe mode is mainly for IE browser. Below IE7, Microsoft's coding specifications are different from the standards set by W3C. However, IE has a very large market share, so developers will write according to Microsoft's specifications. Code, with the development of major browser manufacturers and the efforts of the W3C organization, browser standardization is becoming more and more obvious. In order to be compatible with IE6/7, Microsoft added the mode function to the IE8 browser, which can solve the problems caused by inconsistent code standards.
There are two modes: browser mode and document mode. What is the difference between these two modes?
is used to switch IE’s default document mode for this web page, parse conditional comments for different versions of browsers, and send it to the user agent of the website server (User- Agent) string value. The website can determine the browser version and installed functions based on the different user agent strings returned by the browser, so that different page content can be returned to different browsers. By default, the browser mode of IE8 is IE8. Users can manually switch to different browser modes.
is used to specify which version of IE's page layout engine (Trident) uses to parse and render web page code. Switching document mode causes the web page to be refreshed, but does not change the version number in the user-agent string, nor does it re-download the web page from the server. When switching the browser mode, the browser will automatically switch to the corresponding document mode.
For document mode, each browser has a different working mode
| IE6 | IE7 | ?IE8 | ?IE9 | IE10 | Chrome | Firefox | Safari | Opera | |
| 混杂模式（Quriks Mode） | 有 | 有 | 有 | 有 | 有 | 有 | 有 | 有 | 有 |
| 接近标准模式（Almost Standards Mode） | 无 | 无 | 有 | 有 | 有 | 有 | 有 | 有 | 有 |
| 标准模式（Standards Mode） | 有 | 有 | 有 | 有 | 有 | 有 | 有 | 有 | 有 |
How do we control the document mode in which the browser displays the page?
d1194aa6a0a1a4debf92ccfbff033ad7
The above code is used to specify that IE browser renders in standard document mode Page, we can modify edge to specify a specific version, for example: IE=8
Why should we control this? Obviously, adding this element can tell the browser what mode to use to render the page. Sometimes we display it normally in a higher version of IE browser, but when it comes to a lower version, the layout is messed up. Add the following and the correct DTD statement. That's it.
ad074ad399894b360116eb78a16593fb
Determine the document mode of the current page
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1"> 6 </head> 7 <body> 8 <script> 9 function detect() {10 var mode = document.documentMode;11 switch (mode) {12 case 5:13 alert('Internet Explorer 5 quirks mode');14 break;15 case 7:16 alert('Internet Explorer 7 Standards mode');17 break;18 case 8:19 alert('Internet Explorer 8 Standards mode');20 break;21 case 9:22 alert('Internet Explorer 9 Standards mode');23 break;24 case 10:25 alert('Internet Explorer 10 Standards mode');26 break;27 }28 29 }30 detect();31 </script>32 </body>33 </html>
S (standard mode), A (near standard mode), Q (mixed mode)
| None | Q | Q | Q | Q | Q | Q | Q | Q | Q |
| 8b05045a5be5764f313ed5b9168a17e6 | Q | S | S | S | S | A | A | A | |
| d5a7502c325043e92bff0d559e5f55f2 | ? | ? | ? | ? | ? | ? | ? | ? | |
| 2f0c3cab0b3675af627387499880e0f8 | Q | Q | Q | Q | Q | Q | Q | Q | Q |
| 34591047426c3b9a3fadfffb54c9d05c | S | S | S | S | S | A | A | A | A |
| 9184d403af4bfcf7154c905746203629 | S | S | S | S | S | A | A | Q | A |
| ce00eecdf9252de6c2b0de8889815e59 | S | S | S | S | S | A | A | A | A |
| a73094d7f9503c885bdc52b97b2daeb7 | S | S | S | S | S | A | A | A | A |
| 05fa6ed139b2521231f706e9ff0ef818 | Q | Q | Q | Q | Q | Q | Q | Q | Q |
| f2f216197c980f48d6fa614d63dba7b0 | Q | Q | Q | Q | Q | Q | Q | Q | Q |
| 5ee5d00c817d813e46336070c67b569b | S | S | A | A | A | A | A | A | Q |
| 11bac5419b0c7c3c43915011ab2aa383 | Q | S | A | A | A | A | A | A | Q |
| 321151b1c5513a86fce764b2d22d00ae | Q | Q | Q | Q | A | A | A | A | Q |
| 4c6464c690183e3e7408b848840a09e1 | S | S | S | S | S | A | A | A | A |
| a9d268e883f3ec7b8daa63aa1fc52279 | S | S | S | S | S | A | A | A | A |
| 85ed68d7dfada1d22c39fefc425538d6 | S | S | S | S | S | A | A | A | A |
| 82e4865872727f41d1edae4f463247d6 | S | S | A | A | A | A | A | A | Q |
| 52b189f45abba88b2989c5c1f30b7a34 4c6464c690183e3e7408b848840a09e1 | S | S | S | S | S | A | Q | A | Q |
| 52b189f45abba88b2989c5c1f30b7a34 a9d268e883f3ec7b8daa63aa1fc52279 | S | S | S | S | S | A | Q | A | Q |
| 52b189f45abba88b2989c5c1f30b7a34 85ed68d7dfada1d22c39fefc425538d6 | S | S | S | S | S | A | Q | A | Q |
| 52b189f45abba88b2989c5c1f30b7a34 82e4865872727f41d1edae4f463247d6 | S | S | A | A | A | A | Q | A | Q |
| e643b272d7637703ed44baeb188d1ee0 | Q | S | S | Q | Q | Q | Q | Q | Q |
| 79f0067d2b42a613197cdc53ead6a788 | Q | S | S | S | S | A | A | A | Q |
| 7ae3e826ec6a392d1dccb928c4b3cc2a | S | S | S | Q | Q | Q | Q | Q | Q |
| fc7741f143d0731e2c71da425e5c3676 | S | S | S | S | S | A | A | A | Q |
PS：
Opera文档模式：http://www.opera.com/docs/specs/doctype/
Firefox文档模式：https://developer.mozilla.org/en-US/docs/Mozilla's_DOCTYPE_sniffing
IE8：http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx