DTD and pattern_html/css_WEB-ITnose-HTML Tutorial-php.cn

DTD and pattern_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Release： 2016-06-24 11:54:12

Original

1237 people have browsed it

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).

Strict
Clean markup to avoid clutter in the presentation layer.

Transitional
DTD can contain rendering attributes and elements that the W3C expects to be moved into style sheets. Use

Frameset
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 .

Mode

The 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?

Browser mode
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.

Document mode
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?

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.

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

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>

Copy after login

S (standard mode), A (near standard mode), Q (mixed mode)

Doctype NS6 Old Moz Moz & Safari & Opera 10 & IE10 & HTML5 Opera 9.0 IE 8, IE 9 & Opera 9.5 IE 7 & Opera 7.10 IE 6 & Opera 7.0 Mac IE 5 Konq 3.2

None	Q	Q	Q	Q	Q	Q	Q	Q	Q
	Q	S	S	S	S	A	A	A
	?	?	?	?	?	?	?	?
	Q	Q	Q	Q	Q	Q	Q	Q	Q
	S	S	S	S	S	A	A	A	A
	S	S	S	S	S	A	A	Q	A
	S	S	S	S	S	A	A	A	A
	S	S	S	S	S	A	A	A	A
	Q	Q	Q	Q	Q	Q	Q	Q	Q
	Q	Q	Q	Q	Q	Q	Q	Q	Q
	S	S	A	A	A	A	A	A	Q
	Q	S	A	A	A	A	A	A	Q
	Q	Q	Q	Q	A	A	A	A	Q
	S	S	S	S	S	A	A	A	A
	S	S	S	S	S	A	A	A	A
	S	S	S	S	S	A	A	A	A
	S	S	A	A	A	A	A	A	Q
	S	S	S	S	S	A	Q	A	Q
	S	S	S	S	S	A	Q	A	Q
	S	S	S	S	S	A	Q	A	Q
	S	S	A	A	A	A	Q	A	Q
	Q	S	S	Q	Q	Q	Q	Q	Q
	Q	S	S	S	S	A	A	A	Q
	S	S	S	Q	Q	Q	Q	Q	Q
	S	S	S	S	S	A	A	A	Q