-
Mode
-
-
Quirks Mode)
-
In the geek mode, in order to avoid "damaging" the pages created based on the old practices prevalent at the end of 1990s, the browser violates the contemporary Web format specifications. Different browsers implement different quirks. In Internet assumer6, 7, and 8, the quirks are effectively frozen in ie5.5. In other browsers, the eccentric mode is a small offset to the almost standard mode.
-
If you are creating a new webpage, you should comply with the relevant specifications (especially CSS2.1) and use the standard mode.
Standard Mode)
-
In standard mode, the browser tries to properly process the compliant documents in a specified browser.
-
Different browsers follow different stages, so the standard mode is not a single goal.
-
HTML5 calls this mode "non-weird mode (no quirks mode )"
-
-
Almost Standards Mode)
-
Irefox, Safari, Chrome, Opera (starting from 7.5), and IE8 also have a pattern called "almost standard mode, it implements the vertical size of table cells in accordance with the traditional approach, rather than strictly following the CSS2 specifications. Mac IE5, Windows IE6 and 7, Opera7.5 and Konqueror earlier versions do not require almost standard mode, because they do not strictly follow the CSS2 specification in their respective standard mode to achieve the vertical size of table cells. In fact, their standard mode is closer to Mozilla's standard mode rather than Mozilla's standard mode.
-
HTML5 calls this mode "limited quirks mode )".
IE7 Mode
-
IE8 has a mode that mainly freezes copies of IE7 standard mode. Other browsers do not have this mode, and this mode is not specified by html5.
Select doctype
Standard mode, cutting-edge Verification
-
<!DOCTYPE html>
-
If you want to verify
<video>,
<canvas>And ARIA. Note that the valid HTML5 definition is still changing. Make sure to test the image in Firefox, Safari, Chrome, Opera9, or Opera10.
-
Alignment. It is not enough to test image alignment in Internet Explorer. In any case, make sure that the test is also conducted in IE8.
-
Standard mode, more stable verification target
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">This doctype will also trigger the standard mode, and the effective definition of 10-year-old HTML4.01 is stable. Ensure that image alignment is tested in Firefox, Safari, Chrome, Opera9, or Opera10. It is not enough to test image alignment in Internet Explorer. In any case, make sure that the test is also conducted in IE8.
-
-
To use the standard mode, verify that the labels are not recommended or use sliced images in the table layout and do not want to fix them.
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
It will trigger almost standard mode (and full standard mode in the old Mozilla ). Note that if you migrate the image to HTML5 in the future, the layout of the sliced Image Based on the table may be damaged (and the complete standard mode is also the case ).
-
-
Deliberately use the geek Mode
-
No doctype.
-
Do not do this. Deliberate design for the geek model will plague you, and in the future your colleagues or successors will not even care about Windows IE6 (Netscape4.x and IE5 are no longer concerned ). It is a bad idea to design for the strange pattern. Believe me.
-
If you want to continue to support Windows IE6, it is better to make a special hack to use conditional annotations than to make other browsers go back to the strange mode.
We do not recommend any XHTML doctype because it is considered harmful to use XHTML as text/html. In any case, if you choose to use XHTML doctype, please note that the XML Declaration will make IE6 (but not IE7 !) Trigger the strange mode.
IE8 complications
IE8 has four modes: IE5.5, IE7, IE8, and IE8.
The mode selection depends on the data from several aspects: doctype, meta element, HTTP header, regular data download from Microsoft, lan domain, user settings, LAN administrator settings, and parent framework mode (if any) the view button compatible with the address bar is triggered by the user. (For other applications embedded in the engine, the mode also depends on the embedded application .)
Fortunately, IE8 uses doctype sniffing like other browsers in the following situations:
- The author has not set the X-UA-Compatible HTTP header.
- The author has not set the X-UA-Compatible meta tag.
- Microsoft has not placed the domain name of the site in the blacklist.
- The LAN Administrator did not place the site on the blacklist.
- The user does not press the compatible View button (or add it to a specific user blacklist in other ways)
- This site is not in the LAN domain
- The user did not select to display all sites in IE7
- The page is not embedded in the compatible mode by frame.
In addition to two cases about X-UA-Compatible, IE8 performs doctype sniffing like IE7. IE7 simulation (IE7 emulation) is called a compatible view.
In the case of X-UA-Compatible, the behavior of IE8 is completely different from that of other browsers.
The following simple guide describes how to select the X-UA-Compatible HTTP header or meta tag for a new text/html document that has doctype triggered in other browsers:
-
Your domain name is not on the Microsoft blacklist.
-
You do not need to include the X-UA-Compatible HTTP header or meta tag.
-
Your domain name is on the Microsoft blacklist.
-
Include the following meta elements on your page (it is invalid in HTML5)
<meta http-equiv="X-UA-Compatible" content="IE=Edge">(Before any script element), or set the following HTTP header: X-UA-Compatible: IE = Edge
-
Your site works in IE7 but is damaged in IE8
-
Include the following meta element on your page (it is invalid in HTML5) (before any script element), or set the following HTTP header: X-UA-Compatible: IE = EmulateIE7, and then repair your site does not rely on non-standard IE7 behavior and migrate to IE = Edge.
IE8 mode selection process
-
Start to enter:
-
X-UA-Compatible meta?
-
IE = 7: IE7 Standard
-
IE = EmulateIE7: Enter "weird or no doctype? (Compatible mode )"
-
IE = IE8 or IE = IE7 or IE = a or IE = EmulateIE8 or no or first script: Enter "X-UA-Compatible HTTP header ?"
-
IE = 8 or IE = Edge or IE = 99 or IE = 9.9: Enter "almost standard mode ?"
-
IE = 5: Use the geek mode (IE5.5)
-
X-UA-Compatible HTTP header?
-
IE = 7: Use IE7 standard mode
-
IE = EmulateIE7: Enter "weird or no doctype? (Compatible mode )"
-
IE = IE8 or IE = IE7 or IE = a or IE = EmulateIE8 or not: Go to "show all sites... Pre-set ?"
-
IE = 8 or IE = Edge or IE = 99 or IE = 9.9: Enter "almost standard mode ?"
-
IE = 5: Use the geek mode (IE5.5)
-
Weird mode or no doctype? (Compatible mode)
-
Yes: Use the geek mode (IE5.5)
-
No: IE7 standard mode
-
Show all sites... Pre-set?
-
Yes: Entering the "weird mode or no doctype? (Compatible mode )"
-
No: Go to "display LAN site... Pre-set ?"
-
Show LAN sites... Pre-set?
-
Yes: Go to "is the site located in the LAN Domain ?"
-
No: "Is the domain name on the Microsoft maintenance list ?"
-
Is the domain name on the Microsoft maintenance list?
-
Yes: Entering the "weird mode or no doctype? (Compatible mode )"
-
No: Go to the "compatibility mode page and use Frame to embed it ?"
-
Is the page in compatibility mode embedded with Frame?
-
Yes: Entering the "weird mode or no doctype? (Compatible mode )"
-
No: Go to "have you pressed the compatibility mode button ?"
-
Is the compatibility mode pressed?
-
Yes: Entering the "weird mode or no doctype? (Compatible mode )"
-
No: Enter the "weird mode or no doctype? (IE8 )"
-
Weird mode or no doctype? (IE8)
-
Yes: Go to "use weird mode (IE5.5 )"
-
No: Entering "almost standard mode ?"
-
Almost standard mode?
-
Yes: IE8 standard mode
-
No: IE8 standard mode
Doctype Processing Method
| Doctype |
NS6 |
Old Moz |
Moz & Safari & Opera10 & HTML5 |
Opera9.0 |
IE8 & Opera9.5 |
IE7 & Opera7.10 |
IE6 & Opera7.0 |
Mac IE5 |
Konq3.2 |
| None |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”> |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”> |
S |
S |
S |
S |
S |
A |
A |
A |
A |
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”> |
S |
S |
S |
S |
S |
A |
A |
Q |
A |
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”
“http://www.w3.org/TR/html4/strict.dtd”> |
S |
S |
S |
S |
S |
A |
A |
A |
A |
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”> |
S |
S |
S |
S |
S |
A |
A |
A |
A |
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
Q |
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”> |
S |
S |
A |
A |
A |
A |
A |
A |
Q |
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd”> |
Q |
S |
A |
A |
A |
A |
A |
A |
Q |
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”> |
Q |
Q |
Q |
Q |
A |
A |
A |
A |
Q |
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> |
S |
S |
S |
S |
S |
A |
A |
A |
A |
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML Basic 1.0//EN” “http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd”> |
S |
S |
S |
S |
S |
A |
A |
A |
A |
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> |
S |
S |
S |
S |
S |
A |
A |
A |
A |
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> |
S |
S |
A |
A |
A |
A |
A |
A |
Q |
<?xml version=”1.0″ encoding=”UTF-8″?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> |
S |
S |
S |
S |
S |
A |
Q |
A |
Q |
<?xml version=”1.0″ encoding=”UTF-8″?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML Basic 1.0//EN” “http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd”> |
S |
S |
S |
S |
S |
A |
Q |
A |
Q |
<?xml
version=”1.0″ encoding=”UTF-8″?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> |
S |
S |
S |
S |
S |
A |
Q |
A |
Q |
<?xml
version=”1.0″ encoding=”UTF-8″?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> |
S |
S |
A |
A |
A |
A |
Q |
A |
Q |
<!DOCTYPE HTML PUBLIC “ISO/IEC 15445:2000//DTD HTML//EN”> |
Q |
S |
S |
Q |
Q |
Q |
Q |
Q |
Q |
<!DOCTYPE HTML PUBLIC “ISO/IEC 15445:2000//DTD HyperText Markup
Language//EN”> |
Q |
S |
S |
S |
S |
A |
A |
A |
Q |
<!DOCTYPE HTML PUBLIC “ISO/IEC 15445:1999//DTD HTML//EN”> |
S |
S |
S |
Q |
Q |
Q |
Q |
Q |
Q |
<!DOCTYPE HTML PUBLIC “ISO/IEC 15445:1999//DTD HyperText Markup
Language//EN”> |
S |
S |
S |
S |
S |
A |
A |
A |
Q |
<!DOCTYPE html> |
Q |
S |
S |
S |
S |
A |
A |
A |
