In-depth understanding of browser compatibility mode

Last Update:2014-10-15 Source: Internet

Author: User

Tags website server

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Abstract:There are already many documents and materials on the Internet about various browser models, but few of them can fully explain several concepts. Most of the information is outdated, and some content may no longer be applicable. In this article, I will try to clarify several concepts, remove outdated content, and only keep necessary dry goods.

You must know that the browser has a standard mode and a quirks mode. Maybe you have heard of a standard mode. When you open Internet Explorer, you can see the browser mode, document mode, and Compatibility View...

What are these? What is the browser mode and what is the document mode? What is the difference between the standard mode and the quasi-standard mode? What is the difference between ie9 Compatibility View and true ie9? Under what circumstances will these modes be triggered, and how can we detect the current mode of the browser? This article will answer these questions in detail.

Three Modes

First, we need to know why there are so many modes. In fact, this is a historical issue. In the war of browsers, Netscape Navigator and Microsoft Internet Explorer have different ways to implement web pages, at that time, the webpage should develop different versions for the two browsers respectively. After W3C standards are developed, these browsers will not be able to continue using such pages, which will make most existing sites unavailable. For this reason, the browser introduces two modes to deal with some legacy sites.

The current browser typographical engine supports three modes: quirks mode, quasi-Standard (almost standards) mode, and standard (standards) mode. In the weird mode, the typographical engine simulates Internet Explorer 4 and Internet Explorer 5 in windows. In fully standard mode, it tries its best to execute the behaviors specified by the HTML and CSS specifications; in the quasi-standard mode, there are only a few actions in the weird mode.

Is the so-called standard model always "standard? The answer is no. Because different browser vendors have different standards implementation stages, the "standard mode" of Each browser may be quite different.

Firefox, Safari, chrome, Opera (since 7.5), IE8, and ie9 all have a quasi-standard mode. Since the standard mode is not so standard, the standard mode is certainly not standard. The original quasi-standard mode only affected the images in the table, and then the browsers made more or less modifications. Under what circumstances will the quasi-standard mode be triggered? Yes, as you have imagined, some doctype will trigger quasi-standard mode, for example:

 
 
  
   
   "-//W3C//DTD XHTML 1.0 Transitional//EN"   
   "-//W3C//DTD XHTML 1.0 Frameset//EN"   
   "-//W3C//DTD HTML 4.01 Transitional//EN"  
   "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd"

An example of a complete doctype is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

If you insert this doctype in Firefox and insert an empty span tag in the page, you can view the layout of the elements in firebug:

In Quasi-standard mode, the line-height of an element is ignored. The element has neither width nor height:

In standard mode, the element still retains the line-height with a height of 18 Px:

In the Firefox browser, right-click the browser and choose view page information to view the mode in which the current browser is running (only the "mixed mode" and "standard mode" are displayed ):

Henri sivonen has written an article called activating browser modes with doctype, which contains a complete table that shows how various doctype settings will render the browser. Here is an article translated by Qin Ge titled activating the browser mode with doctype.

In view of the fact that some browsers of the latest version have abandoned the standard mode, the details of the standard mode will not be described here. Interested users can read the following information in detail:

Gecko's "almost standards" Mode
Line Height Calculations in almost standards mode
Images, tables and mysterious gaps
Almost-Standards Test
Doctype switches support in opera presto 2.10

So, since so many doctype will trigger the non-standard mode, how can we trigger the standard mode? Right! To use HTML5 doctype, that is:

 
 
  
  <!DOCTYPE html>

Note: If the document does not contain doctype or contains an unrecognized doctype, the browser enters the weird mode.

The following describes the weird mode. The weird mode has many "weird" behaviors, mainly to be compatible with the old pages left over. Different browsers have different weird modes, and they all have their own implementation methods. The difference between the weird mode and the standard mode is mainly reflected in the box model and the processing of the table cell height. For example, in IE's weird mode, the width of the element contains padding and border, while in standard mode, padding and border are not part of the width.

If you want to learn more about the behavior of your browser in the weird mode, refer to the following two articles. However, we do not recommend that you spend too much energy on this. This is a historical issue. We also try to ensure that new pages do not enter the weird mode:

Mozilla quirks mode behavior
What happens in quirks mode?
Compatability mode test

Summary:Now, we need to know that there are three operating modes for browsers: standard mode, quasi-standard mode, and weird mode. <! Doctype HTML> to correctly trigger the standard mode. Do not discard the doctype statement, because it will lead the browser to enter the weird mode.

IE browser Mode

IE8 has four modes: ie5.5, IE7, IE8, and IE8. ie9 has seven modes: ie5.5 weird mode, IE7 standard mode, IE8 standard mode, IE8 standard mode, ie9 standard mode, ie9 standard mode, XML mode.

The XML mode is for the XML document, here is not intended to elaborate, details can see this article [defining document compatibility] (http://msdn.microsoft.com/en-us/library/cc288325 (V = vs.85). aspx) has elaborated in detail.

In IE8 and later ie browsers, the X-UA-compatible header is supported. You can set the HTTP header on the server side or insert the <meta> label on the page to achieve this:

 
 
  
  HTTP:  
  
  Header set X-UA-Compatible "IE=8"  
  
   
  
  Meta:  
  
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

This method mainly prevents the old page from displaying abnormal information in the newer browser. For example, the code above can force browsers of IE8 or later versions to render in IE7 mode.

Note: Do not use this technology in newly developed web pages. This technology should only be used as a transitional solution in the process of replacing old and new web pages. Currently, newly developed web pages support the latest version of browsers as much as possible, so this technology will be gradually eliminated. If you are interested, you can read this article from Microsoft.

Summary:Here we need to know that this method can force the browser to run in a certain mode, but it should only be used as a transitional solution and should not be used in newly developed web pages.

Ie9 Compatibility View and ie9 standard view

If you are using ie9, press the F12 key to display the developer tool, which has two drop-down menus: browser mode and document mode. So what is the browser mode? What is the document mode? What is the difference between the two?

The browser mode is used to switch the default document mode of IE for the web page, parse the conditional comments of different browsers, and send the User-Agent string value to the website server. 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 based on different browsers.

Document mode is used to specify the version of the page layout engine (Trident) of IE to parse and render webpage code. Switching the document mode will cause the webpage to be refreshed, but the version number in the user agent string will not be changed or the webpage will not be re-downloaded from the server. When the browser mode is switched, the browser automatically switches to the corresponding document mode.

In a word, the browser mode affects the server's judgment on the browser version of the client and the conditional comment. The document mode affects the IE typographical engine and web page rendering, CSS hack may also be affected. Therefore, you can use conditional comments to determine the browser mode, and use CSS hack to determine the document mode.

If we use a simple JavaScript statement to view the value of the User-Agent string, we can see the difference between ie9 Compatibility View and ie9:

<script type="text/javascript">

    alert(‘UA:‘+navigator.userAgent);

</script>

The output result is as follows. Note that the MSIE version number is different. Determining the browser mode is to determine the version number in the User-Agent, that is, the value following the MSIE:

 
 
  
  // Ie9
  
  UA: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; slcc2 ;. net CLR 2.0.50727 ;. net CLR 3.5.30729 ;. net CLR 3.0.30729; Media Center PC 6.0 ;. net4.0c ;. net4.0e; Tablet PC 2.0)
  
   
  
  // Ie9 Compatibility View
  
  UA: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/5.0; slcc2 ;. net CLR 2.0.50727 ;. net CLR 3.5.30729 ;. net CLR 3.0.30729; Media Center PC 6.0 ;. net4.0c ;. net4.0e; Tablet PC 2.0)

The ie9 Compatibility View simulates the behavior of IE7. Is there any difference between ie9 Compatibility View and IE7? There must be a difference. Even the IE7 standard mode in ie9 is different from the native IE7 in rendering. We will not go into it for the moment.

Now that the version number of the ie9 Compatibility View is the same as that of IE7, how can we determine whether the current version is ie9 Compatibility View or pure IE7? In fact, it is very simple. You only need to determine whether the User-Agent string of the Browser contains the trident. First, check whether the MSIE version is 7.0, and then determine whether it contains the Trident string. if it contains the ie9 Compatibility View, otherwise the IE7 is pure.

Summary:At this point, you should understand what is the browser mode, what is the document mode, and the differences between them, and also understand the differences between ie9 Compatibility View and ie9 and IE7.

Control the default rendering Mode

When Internet Explorer 9 encounters a webpage that does not contain the X-UA-compatible header, it uses <! Doctype> command to determine how to display the webpage. If this command is missing or a standard-based document type is not specified, Internet Explorer 9 displays the webpage in ie5 mode (weird mode.

If <! If the doctype> command specifies a standard-based document type, Internet Explorer 9 displays the webpage in ie9 mode, except in the following cases:

The Compatibility View is enabled for the webpage.
This webpage is loaded in the Intranet region, and Internet Explorer 9 has been configured to use the Compatibility View to display webpages in the Intranet region.
Internet Explorer 9 has been configured to use the Compatibility View to display all websites.
Internet Explorer 9 has been configured to use the Compatibility View list (in fact, it is a blacklist, which specifies a group of websites that always use the Compatibility View ).
You have used the developer tool to overwrite the settings specified on the webpage.
This webpage encounters a page layout error and has configured Internet Explorer 9 to automatically recover from this type of error by re-opening the webpage in the Compatibility View.

In addition, you can use the following registry key to control how Internet Explorer handles pages that do not contain the X-UA-compatible header.

 
 
  
  HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)  SOFTWARE  Microsoft  Internet Explorer  Main  FeatureControl  FEATURE_BROWSER_EMULATION  iexplore.exe = (DWORD)

The DWORD value must be equal to one of the following values:

Value description

7000 contains standard-based <! The doctype> command page is displayed in IE7 mode.

8000 contains standard-based <! The doctype> command page is displayed in IE8 mode.

The 8888 page is always displayed in IE8 mode, regardless of <! Doctype> command. (This bypasses the exceptions listed above .)

For the entire process of determining the document mode in IE browser, refer to this Article "How IE8 determines document mode". This article describes the entire process and internal mechanism in detail.

Summary:Still stick to use <! Doctype HTML> to minimize the chance of errors.

Document mode detection

In JavaScript, you can use documentmode to check the document mode. in IE6 and IE7, compatmode is used to determine the document mode. This attribute has been replaced by documentmode since IE8.

If you need to be compatible with IE6 and IE7 (required...), the corresponding detection code is roughly as follows:

 
 
  
  engine = null;  
  
  if (window.navigator.appName == "Microsoft Internet Explorer")  
  
  {  
  
  // This is an IE browser. What mode is the engine in?  
  
  if (document.documentMode) // IE8 or later  
  
  engine = document.documentMode;  
  
  else // IE 5-7  
  
  {  
  
  engine = 5; // Assume quirks mode unless proven otherwise  
  
  if (document.compatMode)  
  
  {  
  
  if (document.compatMode == "CSS1Compat")  
  
  engine = 7; // standards mode  
  
  }  
  
  // There is no test for IE6 standards mode because that mode  
  
  // was replaced by IE7 standards mode; there is no emulation.  
  
  }  
  
  // the engine variable now contains the document compatibility mode.  
  
  }

Compatmode in IE6 and IE7 has two possible values: "css1compat" and "backcompat", which correspond to the standard mode and weird mode in IE6 and IE7 respectively. The above code first assumes a weird pattern, and then tries to overturn the hypothesis. The "IE6 standard mode" is not included here because it has been replaced by the IE7 standard mode and is not simulated.

Note that different document modes have some impact on JavaScript, so we don't have to go into the different effects of different document modes on JavaScript, you only need to perform specific feature detection during encoding.

Summary:In general, there is no need to perform document mode detection. For style compatibility, we can write CSS hack. For JavaScript, we recommend Feature Detection instead of browser detection.

Relationship between browser mode and document mode

The browser mode can determine the default document mode of the page, but the document mode may be affected by other factors, as described above. If the browser mode is different from the document mode, will it have any impact?

We already know that the browser mode is mainly used to identify the browser itself and will not affect page rendering in principle. However, we know that the browser mode can affect the conditional annotation, so if there is a conditional Annotation on your page, the changes in the browser mode will affect page rendering.

The server can only determine the version of the client browser through the version marked by the browser mode. If you mark the browser mode as ie9 but select the document mode as IE7 standard, there may be problems. However, it depends on whether the server has a processing policy for different browsers. If the server does not differentiate the output of different browsers, the two modes will not be different.

Summary:If the server performs differentiated processing on the output of different browsers, the inconsistent browser mode and document mode may cause problems.

Conclusion

Based on a large number of existing documents, this article elaborates on the differences between various models and their relationships. I believe that through the above description, you have been able to distinguish between these browser or document modes and their relationships. The conclusions of each section have been elaborated in the summary, hoping to help you.

From: Turing community

In-depth understanding of browser compatibility mode

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More