Preparing Web Sites for Internet Explorer 8 - Ruud de Jonge

Ruud de Jonge

over Microsoft Platform en Security ontwikkelingen

Preparing Web Sites for Internet Explorer 8

Summary

The latest version of Internet Explorer (IE8) will be released over the next few months. IE8 Beta 2 was released in August 2008 and is available for public download at  http://www.microsoft.com/windows/internet-explorer/beta/worldwide-sites.aspx. We are extremely excited with this release of the world’s most popular browser, and believe that IE8 is packed with many enhancements that will improve and enrich the web experience[1].

Internet Explorer 8 also improves interoperability and support for open Web standards, including HTML 4.01, CSS 2.1 and improved Document Object Model Interoperability by including a new layout engine which renders Web pages in the most standards complaint manner by default. This enables developers to create Web sites that work as intended across all standards-compliant browsers.

As a consequence of this change, however, some Web sites that have been built for previous browser versions may not display correctly with the new layout engine in Internet Explorer 8.

From an end-user perspective, Internet Explorer 8 has a Compatibility View button which, when pressed, displays the Web content with the Internet Explorer 7 rendering engine. This document also describes approaches available to Web Site Developers and Administrators to ensure proper display of their existing sites in Internet Explorer 8.

Objectives

This document aims to help Web Site Developers and Administrators with prescriptive guidance on preparing their existing Web sites if the sites do not display as intended in Internet Explorer 8. The following sections include specific steps for the following scenarios:

1.    Targeting a specific Web page for older Internet Explorer compatibility (See Page 6)

2.    For Web Sites running Internet Information Service 7 (IIS7) for older Internet Explorer compatibility (See Page 7)

3.    For Web Sites running Internet Information Service 6 (IIS6) for older Internet Explorer compatibility (See Page)

4.    For Web Sites running Apache Web Server 2.2 for older Internet Explorer compatibility (See Page)

More Information

Additional information and resources for Internet Explorer 8:

1.    Internet Explorer 8 web site: http://www.microsoft.com/ie8   

2.    The official Windows Internet Explorer Weblog: http://blogs.msdn.com/ie. This blog site is a great source of insider information on IE8 features, and compatibility considerations

3.    The Internet Explorer 8 Evaluators Guide can be downloaded at http://download.microsoft.com/download/9/7/f/97f5e019-20b9-47b4-bf0c-e7ad38ef2faf/IE8%20Evaluators'%20Guide%20-%20August%2008.pdf

4.    The Internet Explorer 8 Demo Site lets you test some of IE8’s new features: http://www.ie8demos.com/tryit/

5.    Read Aaron Gustafson’s Web article for details on the thinking process behind IE8’s support for web standards, as well as backward compatibility. The article can be found at http://alistapart.com/articles/beyonddoctype. Aaron is one of the members of the WaSP-Microsoft Task Force.

 

Overview

With Internet Explorer 8, Microsoft’s commitment to improve interoperability and support for open Web standards (see http://blogs.msdn.com/ie/archive/2008/03/03/microsoft-s-interoperability-principles-and-ie8.aspx) means that IE8 interprets Web content in the most standards-compliant[2] way possible. Therefore, IE8 will render web pages using standards mode by default unless explicitly specified otherwise. This enables web sites to be created more efficiently and to operate more predictably – If developers code to standards, then they can be ensured that all browsers interpret and display Web page in the same way, alleviating the practise by web developers to include code unique for each browser.

As a consequence to adhering to Web Standards support by default, some existing sites that relied on older browsers’ “legacy” behaviours may not display correctly in Internet Explorer 8. Examples of display problems are out-of-place menus, images and text.

For the End User: IE8 Compatibility View

Some Web sites that are designed for older browsers may not display correctly in Internet Explorer 8 which, by default, renders content in the most standards-compliant way possible. IE8 has a Compatibility View button that displays those pages as they were designed to be viewed. This provides end-users with an easy way to fix display problems that may occur.

clip_image002

When Internet Explorer 8 detects a Web site that is designed for an older version of the browser, the Compatibility View button appears next to the Refresh button on the Address Bar. Pressing the button causes Internet Explorer 8 to switch to the Internet Explorer 7 rendering engine. Additionally, a balloon tip shows that the site is running in Compatibility View.

clip_image004

The state of the button is saved for that Web domain on a client-side list, eliminating the need to press it again when the user returns to the same page at a later time.

Compatibility View and the Enterprise

A large number of line-of-business websites are Internet Explorer 7 capable today. In order to preserve compatibility, Internet Explorer 8 ships with smart defaults based on zone evaluation. In the default state, all sites on the public internet display in Internet Explorer 8 Standards mode (Compatibility View off) and all intranet websites display in Internet Explorer 7 Standards mode (Compatibility View on).

For more information, see the blog post: http://blogs.msdn.com/ie/archive/2008/08/27/introducing-compatibility-view.aspx

 

Web Developers & Administrators: Testing Existing Web Sites

Web Developers and Administrators can download IE8 Beta 2, and check that the sites display correctly. Due to the changes in IE8’s layout engine, Web sites that are coded to support “legacy” behaviours may exhibit the following issues:

·         Potential layout issues: out-of-place graphics, Web page elements (e.g., text box, Flash objects, etc.)

·         Potential JavaScript code issues: These may arise due to changes in the IE8 Document Object Model (DOM) to improve interoperable with those of other browsers. Changes include setting and retrieval of page element attributes.

Application Compatibility Toolkit for IE8

The latest Application Compatibility Toolkit (ACT) release, ACT 5.0.5428.1080, can help Web Developers & Administrators to understand application compatibility situation with IE8 – especially with internal line-of-business web applications.

ACT includes the following IE-specific components:

·         Internet Explorer Compatibility Test Tool (IECTT). The IECTT helps identify Web-based issues, shows results in real time, and allows the uploading and viewing of the data in the Application Compatibility Manager (ACM), a part of the ACT toolkit. As the application or site is tested, the IECTT records events in real time when compatibility issues occur. For instance, if one of the tested sites injects JavaScript to another site and the IE8 Cross-site scripting (XSS) filter detects this as a reflection attack, a Cross-Site Scripting Filter event would be logged in the IECTT UI.

·         Internet Explorer Compatibility Evaluators (IECE). The IECE can be deployed within an enterprise and will help identify Web-based issues in the background. As application or site is tested, the IECE records events in the background as they occur. The logged events can then be viewed in the ACM.

The ACT can be downloaded in http://www.microsoft.com/downloads/details.aspx?FamilyId=24DA89E9-B581-47B0-B45E-492DD6DA2971&displaylang=en.

For more information, see the blog post: http://blogs.msdn.com/ie/archive/2008/09/23/application-compatibility-logging-in-ie8.aspx  

 

 

Targeting Specific Web Pages for Previous Internet Explorer Versions

Web developers who are maintaining existing Web sites may encounter specific pages that are incompatible with IE8. In such cases, the developer can explicitly opt-out of displaying the page standards mode, and “force” IE8 to render it with the built-in IE7 layout engine instead. This is done by adding the IE7 mode meta-tag to the HEAD of the Web page.

<head>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

</head>

 

This META tag causes IE8 to utilize IE7's rendering behaviour (i.e., emulate IE7) while still maintaining all IE8 features. This tag has no effect on other browsers.

 

Targeting the Web Site for Previous Internet Explorer Versions

While the method described in the previous section applies to specific Web pages, Web Developers and Administrators can also apply this tag for Web pages in an entire Web site (i.e., server-wide), or directories.  

The approach is to configure the Web server to inject the meta-tag along with HTTP responses, telling IE8 browsers to display page content emulating IE7. This alleviates the need to modify Web pages individually.

The following sections describe the configuration steps for different Web servers.

Web Sites Running Internet Information Services 7.0 (IIS 7.0)

Internet Information Services 7.0 (IIS 7.0) is the default Web server that comes with Microsoft Windows Server 2008. It provides a security-enhanced, easy-to-manage platform for developing and reliably hosting Web applications and services. More than just a Web server, IIS 7.0 is a major enhancement to the Windows Web platform and plays a central role in unifying Microsoft Web platform technologies—ASP.NET, Windows Communication Foundation Web services, and Windows SharePoint Services[3].

The steps listed below show how to add the IE=EmulateIE7 HTTP Header on a Web server running IIS 7.0 using the IIS Manager. These settings can be changed at the site, virtual directory or any level in the configuration.

The sections following describe configuring these changes with the User Interface, the command line, and with the Application Configuration File.

Configuring the EmulateIE7 HTTP Response Header via the User Interface

The steps listed below show how to add the IE=EmulateIE7 HTTP header site- or server-wide on a Web server running IIS 7.0 using the IIS Manager User Interface.

1.    Click Start, click Administrative Tools, and then click Internet Information Services (IIS) Manager.

clip_image006

2.    In the Connections pane (on the left side of the application window), expand the node for the server, and then expand Sites.

clip_image008

3.    Select the Web site for which the custom HTTP Response Header is to be added.

clip_image010

 

 

4.    In the Web site pane, double-click in the section HTTP Response Headers.

clip_image012

5.    Under Actions, click Add.

clip_image014

6.    In the Name box, type X-UA-Compatible, and in the Value box, type IE=EmulateIE7.

clip_image016

7.     Click OK to save the change.

 

Configuring the EmulateIE7 HTTP Response Header via the Command Line

The steps listed below show how to add the IE=EmulateIE7 HTTP header server-wide on a Web server running IIS 7.0 using the command line.

  1. Open an elevated command prompt.
  2. Navigate to the “%systemroot%\system32\inetsrv” directory.
  3. Execute the following command:

appcmd.exe set config -section:system.webServer/httpProtocol /+"customHeaders.[name='X-UA-Compatible',value='IE=EmulateIE7']" /commit:apphost

 

Configuring the EmulateIE7 HTTP Response Header via the application configuration file

The steps listed below show how to add the IE=EmulateIE7 HTTP header server-wide on a Web server running IIS 7.0 using the configuration file (applicationhost.config).

  1. Open a command prompt.
  2. Navigate to the “%systemroot%\system32\inetsrv” directory.
  3. Open the “applicationhost.config” file in a text editor (e.g., Notepad)
  4. Modify the httpProtocol section to include the “X-UA-Compatible” header:

<httpProtocol>

     <customHeaders> 
        <clear /> 
        <add name="X-Powered-By" value="ASP.NET" /> 
        <add name="X-UA-Compatible" value="IE=EmulateIE7" /> 
     </customHeaders>

     <redirectHeaders> 
          <clear /> 
     </redirectHeaders>

</httpProtocol>

 

 

Web Sites Running Internet Information Services 6.0 (IIS 6.0)

Internet Information Services (IIS 6.0) is the default Web server that comes with Windows Server 2003. IIS 6.0 provides Web server capabilities over an intranet, the Internet, or an extranet.

The sections following describe configuring these changes with the User Interface, the command line, and with the Application Configuration File.

Configuring the EmulateIE7 HTTP Response Header via the User Interface

The steps listed below show how to add the IE=EmulateIE7 HTTP header site- or server-wide on a Web server running IIS 6.0 using the IIS Manager User Interface.

1.    Run the Internet Information Services (IIS) Manager. Do this by running inetmgr.exe, or starting this from the Start menu (under Administrative Tools, and then click Internet Information Services (IIS) Manager.)

clip_image018 

2.    Select and expand the Server node (on the left hand pane) and then expand Web Sites.

clip_image020

3.    Right-click the Web site you want and then click Properties.

clip_image022

4.    Click the HTTP Headers tab.

clip_image024

5.    Under Custom HTTP headers, click Add.

clip_image026

6.    In the Custom header name box, type X-UA-Compatible, and for Custom header value box, type IE=EmulateIE7.

clip_image028

7.    Confirm the changes.

 

Web Sites Running Apache Server (Apache 2.2)

Apache 2.2 HTTP Server configuration, the response can be set at the server level, directory level or within the individual HTML page. To include a custom HTTP response header, follow these steps:

Set server level response header

1. Open httpd.conf in a text editor

clip_image031

2. Uncomment (or add)  “LoadModule headers_module modules/mod_headers.so

clip_image034

3. Add the following configuration fragment at the end of the httpd.conf file:

<IfModule headers_module>
Header set X-UA-Compatible: IE=EmulateIE7
</IfModule>

clip_image037

4. Save httpd.conf file

5. Restart the Apache server

clip_image039

6. Browse the test web page

clip_image042

The above setting will insert X-UA-Compatible header in all the HTTP response streams.

 

Set directory level response header

Directory level override can be done by following the instructions given below:

1. Open httpd.conf in a text editor

clip_image031

2. For the directory in question (say ie8test) set the override as below:

<Directory "C:/Program Files/Apache Software Foundation/Apache2.2/htdocs/ie8test">
Options Indexes FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
</Directory>

(Note: AllowOverride All will make the server read .htaccess file located in the directory)

3. Create .htaccess file in the directory if not already present

4. Open .htaccess file in a text editor

<IfModule headers_module>
Header set X-UA-Compatible: IE=EmulateIE7
</IfModule>

5. Restart the Apache server

clip_image039

6. Browse the web page

clip_image042

For additional syntax on request and response headers for Apache 2.x visit:

http://httpd.apache.org/docs/2.2/mod/mod_headers.html

 

 



[1] Internet Explorer 8 has features such as Web Slices, Accelerators and Visual Search enables faster web browsing. Learn more about these features at http://www.microsoft.com/ie.

[2] Internet Explorer 8 is fully-compliant to, and passed the Web Standards Project’s ACID2 Test. IE8 fully supports HTML 4.01, CSS 2.1, as well as improved DOM interoperability.

Commentaar:

Preparing Web Sites for Internet Explorer 8 - Ruud de Jonge zei:

Pingback from  Preparing Web Sites for Internet Explorer 8 - Ruud de Jonge

# December 9, 2008 9:59 AM

The things that are better left unspoken zei:

Microsoft is getting ready to release Internet Explorer 8. The latest available version of Internet Explorer

# January 7, 2009 1:46 AM

Test zei:

I only wanted to know if I got the right answer to the Captcha Cube. Can someone tell-me why the instructions (for the Captcha Cube) are not written in english.

# July 15, 2009 9:27 PM
Wat denkt u?

(Verplicht) 

(Verplicht) 

(Optioneel)

(Verplicht) 
CaptchaCube Vraag:


Antwoord: