Crossrider Extension Performance on Internet Explorer

Question

I am using Crossrider to develop a cross-browser extension. The extension injects a CDN hosted version of Twitter Bootstrap into the page and uses it as the foundation for which many of the components injected by the extension are styled. So far, I've tested this extension on Google Chrome, Mozilla Firefox, and Internet Explorer.

As usual Chrome and Firefox render the components no problem. However, IE9 styles the injected components terribly. Compare how the page should look: Google Chrome, to how it renders in IE9: Internet Explorer.

Does anyone know why IE renders the components so poorly? Visiting the Bootstrap website on IE9, everything looks fine.

Thank you for your time.

Answer 1

As discussed in the comments, the page was rendering in IE7 mode, which does not support much of the CSS3 properties used by Twitter bootstrap.

You can tell IE9 to use a later rendering mode using the X-UA-compatibility meta element. The following article [0] explains this.

[0] http://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx

For example, <meta http-equiv="x-ua-compatible" content="IE=9" > forces IE9 standards mode. A value of edge forces the latest version.