Make your website automatically use IE7 compatibility mode when browsing IE8

Preface

To help ensure that your web pages have a consistent appearance across all future versions of IE, IE8 introduced file compatibility. An additional compatibility mode introduced in IE6, file compatibility enables you to select a specific compilation mode when IE renders your web pages.
In order to ensure that web pages have a consistent appearance in future versions, IE8 introduces file compatibility. When you introduce an additional compatibility mode,
This article explains the need for file compatibility, lists the file compatibility modes that can be used by current versions of IE, and demonstrates how to select a specific compatibility mode.

Understand the need for file compatibility

Each major version of IE adds new features to make the browser easier to use, increase security, and better support industry standards. With these being IE features, one of the risks is that older versions of the website may not display correctly.

To minimize this risk, IE6 allows web developers to choose how IE compiles and displays their pages. "Quirks mode" is the default setting, which will display the page from the perspective of older browsers. "Standards mode" (also called "strict mode") features the most complete support for industry standards. However, to take advantage of this enhanced support, web pages must include the appropriate <!DOCTYPE> directive.

If a web page does not contain a <!DOCTYPE> directive, IE6 will display it in quirks mode. If a web page contains a valid <!DOCTYPE> directive but the browser cannot recognize it, IE6 will display it in IE6 standards mode. Because a small number of sites already included a <!DOCTYPE> directive, switching to compatibility mode was quite successful. This enables web developers to choose the best time to migrate their pages to standards mode.

As time goes by, more sites start using standards mode. They also started to detect IE using IE6 features and functionality. For example, IE6 does not support the universal selector (i.e. the global selector * {} of CSS), so some websites use it to make specific responses for IE.

When IE7 added support for the global selector, sites that relied on IE6 features were unable to detect the new version of the browser. Therefore, those IE-specific mappings will not work in IE7, causing those sites to not display as they expected. Since <!DOCTYPE> only supports two compatibility modes, affected website owners are forced to update their sites to support IE7.

IE8 supports industry standards more than any previous browser, so pages designed for older browsers may not render as expected. To help alleviate all of these issues, IE8 introduces the concept of file compatibility, which allows you to choose a specific version of IE that your web page design should be compatible with. File compatibility adds some new modes in IE8, which tell the browser how to parse and compile a web page. If your webpage does not display correctly in IE8, you can either update your website to support the latest web standards (preferred) or add a meta element to your page to tell IE8 how to compile your page for older browsers.

This will allow you to choose when to update your site to support new features in IE8.

Understanding file compatibility modes

IE8 supports several file compatibility modes that have different characteristics and affect the way content is displayed.

•Emulate IE8 mode instructs IE to use the <!DOCTYPE> directive to determine how to compile content. The Standards mode command will be displayed as IE8 Standards mode and the quirks mode command will be displayed as IE5 mode. Unlike IE8 mode, Emulate IE8 mode respects the <!DOCTYPE> directive.
•Emulate IE7 mode instructs IE to use the <!DOCTYPE> directive to determine how to compile content. The Standards mode command will be displayed as IE7 Standards mode and the quirks mode command will be displayed as IE5 mode. Unlike IE7 mode, Emulate IE7 mode respects the <!DOCTYPE> directive. This is the most recommended compatibility mode for many web pages.
•IE5 mode compiles content like the display in IE7's quirks mode, which is very similar to the display in IE5.
•IE7 mode compiles content as if it were displayed in IE7's standards mode, regardless of whether the web page contains a <!DOCTYPE> directive.
•IE8 mode provides the highest support for industry standards, including W3C Cascading Style Sheets Level 2.1 Specification and W3C Selectors API, and limited support for W3C Cascading Style Sheets Level 3 Specification (Working Draft).
•Edge mode instructs IE to display content in the highest mode currently available. When using IE8 it is equivalent to IE8 mode. If (hypothetically) IE is released in the future that supports a higher compatibility mode, pages using Edge mode will display content using the highest mode supported by that version. The same pages will still display normally when viewed with IE8.

Since edge mode uses the highest mode supported by this version of IE to display the content of the browsed web page, it is recommended to use it only on test pages and other non-commercial pages.

Specify file compatibility mode

To specify a file mode for your page, include a X-UA-Compatible http-equiv header in your page using the meta element. The following is an example of specifying compatibility with Emulate IE7 mode.

<html>
<head>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>My Web Page</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>

Its content changes with the specified page mode. To emulate IE7, specify IE=EmulateIE7. Specify IE=5, IE=7, or IE=8 to select one of the compatibility modes. You can also specify IE=edge to instruct IE8 to use the highest mode it supports.

The X-UA-compatible header is not case sensitive. However, except for the title element and other meta elements, it must appear before other elements in the header section of the web page.

Configure the web server to specify the default compatibility mode

Webmasters can set a specific file compatibility mode for their website by defining a custom header for the website. The specific method depends on your web server. For example, the following web.config file enables Microsoft Internet Information Services (IIS) to define a custom header to automatically compile all web pages using IE7 mode.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>

If you have specified a default file compatibility mode on your web server, you can override it by specifying a different file compatibility mode on individual pages. The mode specified in the web page takes precedence over the mode specified in the server.

Please consult your web server for information about specifying custom headers, or see more information:

Implementing the META Switch on Apache
Implementing the META Switch on IIS

Determine file compatibility mode

To determine the file compatibility mode of a web page when viewed with IE8, use the documentMode function of the document object. For example, entering the following code in the URL bar of IE8 will display the document mode of the current page.

javascript:alert(document.documentMode);
The documentMode function returns a value corresponding to the file compatibility mode of the current page. For example, if the webpage is specified to support IE8 mode, documentMode will return a value of "8".

The compatMode feature introduced in IE6 does not support the documentMode feature introduced in IE8. Applications currently built using compatMode will still work in IE8, but they must be updated to use documentMode.

If you want to use JavaScript to determine the compatibility mode of a document, include the following code to support older versions of IE.

engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
// This is an IE browser. What mode is the engine in?
if (document.documentMode) // IE8
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
}
}
// the engine variable now contains the document compatibility mode.
}
Understanding content attribute values

Content attribute values are flexible in receiving values different from those previously stated. This gives you more control over how IE displays your pages. For example, you can set the content attribute value to IE=7.5. When you do this, IE tries to convert this value to a version vector and picks the closest result. In this case, IE will set it to IE7 mode. The following examples show this mode set to other values.

<meta http-equiv="X-UA-Compatible" content="IE=4"> 
<meta http-equiv="X-UA-Compatible" content="IE=7.5"> 
<meta http-equiv="X-UA-Compatible" content="IE=100"> 
<meta http-equiv="X-UA-Compatible" content="IE=a"> 


<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
Note: The previous examples show individual content values. In fact, IE will only execute the first X-UA-Compatible header in the web page.

You can also use content attributes to specify multiple file compatibility modes, which can help ensure that your pages display consistently in future browser versions. To set multiple document modes, set the content properties to identify the mode you want to use. Use semicolons to separate patterns.

If a particular version of IE supports more than one of the requested compatibility modes, the highest available mode listed in the header's content attribute will be used. You can use this feature to exclude specific compatibility modes, although it is not recommended. For example, the following header will exclude IE7 mode.

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />
in conclusion

Compatibility is a very important concern for web designers. While it would be ideal to be able to build a website that is completely independent of any web browser features or functionality, sometimes this is not possible. File compatibility mode can limit a web page to a specific version of IE.

Use the X-UA-Compatible header to specify which versions of IE your page supports. Use document.documentMode to determine the compatibility mode of the page.

By choosing to support a specific version of IE, you can ensure that your pages will display consistently in future browser versions.

1. <meta http-equiv="X-UA-Compatible" content="IE=5" />
It's like using Windows Internet Explorer 7's Quirks mode, which is very similar to how Windows Internet Explorer 5 displays content.

2. <meta http-equiv="X-UA-Compatible" content="IE=7" />
Regardless of whether the page contains a <!DOCTYPE> directive, it behaves as if Windows Internet Explorer 7 standards mode is used.

3. <meta http-equiv="X-UA-Compatible" content="IE=8" />

4. <meta http-equiv="X-UA-Compatible" content="edge" />
Edge mode tells Windows Internet Explorer to display content in the highest available mode, which essentially breaks Locked mode.

5. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
EmulateIE7 mode tells Windows Internet Explorer to use the <!DOCTYPE> directive to determine how to render content. Standards mode directives are displayed in Windows Internet Explorer 7 standards mode, while Quirks mode directives are displayed in IE5 mode. Unlike IE7 mode, EmulateIE7 mode respects the <!DOCTYPE> directive. For most sites, it is the preferred compatibility mode.

<<: Add a copy code button code to the website code block pre tag

>>: HTML allows partial forced scroll bars to not destroy the overall style and layout

Summary of JavaScript's setTimeout() usage

Make your website automatically use IE7 compatibility mode when browsing IE8

Summary of JavaScript's setTimeout() usage

Detailed explanation of data type issues in JS array index detection

MySQL database JDBC programming (Java connects to MySQL)

Two ways to implement square div using CSS

Several ways to encapsulate breadcrumb function components in Vue3

Solve the problem of inconsistent front and back end ports of Vue

Sharing ideas on processing tens of millions of data in a single MySQL table

Several common CSS layouts (summary)

Solution to win10 without Hyper-V

Solution to the problem of not being able to obtain the hostname of the host in the docker container

Recommend

Detailed explanation of the observer mode starting from the component value transfer of Vue

Remote Desktop Connection between Windows and Linux

Springboot uses vue+echarts front-end and back-end interaction to realize dynamic donut chart

Java example code to generate random characters

Two ways to specify the character set of the html page

Detailed explanation of the use of shared memory in nginx

Summary of Operator Operations That Are Very Error-Prone in JavaScript

Implementation of vscode custom vue template

Implementation of vite+vue3.0+ts+element-plus to quickly build a project

Detailed explanation of Vite's new experience

Solutions to black screen when installing Ubuntu (3 types)

Detailed explanation of whether the MySQL database should use foreign key constraints

Detailed explanation of the problems and solutions caused by floating elements

Version numbers in css and js links in HTML (refresh cache)

docker compose idea CreateProcess error=2 The system cannot find the specified file