LifeinTECH

I recently developed a Force.com application using Visualforce.

Just like HTML, Visualforce can integrate with any standard web technology or JavaScript framework, enabling the developer to create unique force.com applications, while still leveraging the native capabilities of the platform.

Like all web development, Internet Explorer remains a constant challenge, especially when using modern web techniques such as HTML5. I have seen countless examples where a page renders perfectly in Chrome, Firefox and Safari, but fails miserably in Internet Explorer.

Normally, the simplest way to resolve this issue is to define the Internet Explorer document compatibility mode (either via the code or web server). For example, using the X-UA-Compatible meta tag:

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

Unfortunately, this is not an option with Visualforce, as the “X-UA-Compatible” meta tag is automatically stripped by force.com and you have no access to the server configuration.

As a result, you are forced to either “hack” your code to work with Internet Explorer (not recommended), or you could use a simple APEX class to force the X-UA-Compatible meta tag.

To start, create the following APEX class (called ieCompatibility): public class ieCompatibility {

public ieCompatibility() {
   Apexpages.currentPage().getHeaders().put('X-UA-Compatible', 'IE=Edge');
   }
}

Once created, switch to your Visualforce page and add the “controller” attribute, calling the ieCompatibility APEX class.

<apex:page docType="html-5.0" controller="ieCompatibility" standardStylesheets="false" showHeader="false" sidebar="false">

Once saved, reload the page in Internet Explorer.

If successful, the page should now render as designed. The other great thing about this approach is that you can easily re-use the “ieCompatibility” APEX class, without any negative impact to force.com.