Browser compatibility problem rendering mode--1

Compatibility issues

There are many popular browsers on the market, and these browsers are sometimes different in their performance or behavior when they are working on the same page. This difference may be small, not even noticed, or it can be large, even if it does not work in a browser. We collectively refer to the issues that cause these differences as "browser compatibility issues."

Browser's kernel

The core of each brand browser is different, and different cores have different ideas when dealing with the same piece of code. So it can be said that the difference between the browser cores is the root cause of the compatibility problem.

The "kernel" is also called the "engine". A list of common browsers and their rendering engines (also known as typesetting engines) and scripting engines are as follows:

Browser Name	Layout Engine	ECMAScript Engine
Internet Explorer 6-8	Trident	Jscript
Firefox 3.5	Gecko	Tracemonkey
Chrome 4	Webkit	V8
Safari 4	Webkit	Squirrelfish Extreme
Opera 10	Presto	Carakan

Note: For more information on the browser kernel, please refer to Wikipedia-typesetting engine and Wikipedia-web browser comparison in the relevant content.

Introduction to the working mode of the browser

The browser's working mode is often referred to as the "rendering mode". In fact, the different working modes of the browser not only affect the rendering, but also affect the parsing of the code and the behavior of the script.

From a broader perspective, the difference in the way browsers work is not only in working with HTML pages, but also in schema differences when dealing with XML and some non-WEB content, but this article only discusses how browsers work when working with HTML pages.

Note: For more information about the browser's operating mode, refer to activating Browser Modes with Doctype.

The source and change of working mode

Microsoft's IE6 (Internet Explorer 6), released on August 27, 2001, enhanced the compatibility of CSS1, which made IE6 's parsing and rendering of CSS very different from its previous version IE5.5, such as the understanding of the box model, the algorithm for table size, and so on.

To maintain good backwards compatibility, Microsoft has provided a "switch" to the user to determine the browser's operating mode, which is the DTD at the top of the page.
Some DTDs will enable IE6 to work in "Standard compatibility Mode" ("Standard Mode"), which uses IE6 's latest processing, including CSS1 compatibility and some DHTML enhancements.
Other DTDs, including not setting DTDs, will make IE6 work in "Backward compatibility Mode" ("Promiscuous Mode"), which is consistent with IE5.5, which ensures that pages that perform well in IE5.5 can achieve the same results in IE6.
Microsoft in the subsequent launch of the IE7, IE8, also used the above "switch", like IE6, in the IE7, IE8 "promiscuous mode", the page processing mode is still consistent with IE5.5. Therefore, it can be said that the "promiscuous mode" of the IE series, the behavior of the browser freezes in the IE5.5 version, although the version of the IE hybrid mode is slightly different, but their intentions are backwards compatible.

As time progresses and standards progress, IE6, IE7 's "Standard Model" has gradually become inadequate, the March 19, 2009 release of the IE8 redefined the "standard mode", once again enhanced the support of the standard specification, and in order to maintain the compatibility of IE7, IE8 added a mode of work: " Close to the standard mode. As a result, IE8 's work model is divided into three types: "Standard mode", "close to Standard mode" and "Promiscuous mode".

All major browsers currently deal with backwards compatibility issues in the same way as the IE series, providing different modes to ensure backward compatibility.

The browser's working mode is born in this context, it is a good solution to the browser on the standard support of the continuous enhancement and the repair of some errors caused by the backward compatibility problem, but also the browser in different situations of performance and behavior become more complex and diverse.

Through the above, we can conclude that if a page can make each browser work in the "Standard mode", then each browser will try to be compatible with the standard, so the differences between browsers are very small. Conversely, if a page makes each browser work in "Promiscuous mode", then each browser will be as backwards compatible as possible, so the differences between browsers will be maximized.

Note:

1. For more information on IE6, please refer to Wikipedia-Internet Explorer 6.
2. For this issue, refer to w3h-rd8001: the ' width ' and ' height ' in each browser have different positions on some elements.
3. For this issue, please refer to the W3h-re8017:ie Firefox Opera promiscuous mode for TD element percent height calculation error.
4. Refer to Msdn-css Enhancements in Internet Explorer 6 For more information on IE6 's distinction between browser working modes.
5. For example, IE6 's promiscuous mode has the famous "bilateral Bug", while IE7 and IE8 's promiscuous mode does not have this problem.
   For this issue, refer to the floating element in w3h-rx2001:ie5.0 IE5.5 IE6 In some cases there will be double margins.
6. Document.compatmode first appears in IE6, its value indicates the browser's operating mode, "Standard mode" returns "Css1compat", "Promiscuous Mode" returns "Backcompat". This practice has so far been adopted by all major browsers.
   It is important to note that the return value of Document.compatmode is consistent with "standard mode" in subsequent "near-standard mode", which is "Css1compat". In other words, the browser's working mode cannot be distinguished by document.compatmode, only to determine if the browser is working in "promiscuous mode".
   Because the difference between "standard mode" and "close to standard mode" is not big, this method is still widely used today.
7. For more information on the DTD and browser working modes in Firefox, please refer to Mozilla's DOCTYPE sniffing for more information on the DTD and browser working modes in Opera, see DOCTYPE switches support in Opera Presto 2.6.

Suggestions

When writing a page, use a DTD that triggers the "standard mode" of each browser and write code that conforms to the specification to ensure that your pages are compatible to the fullest extent in each browser.

Originally from: http://www.w3help.org/zh-cn/

Browser compatibility problem rendering mode--1