0

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.

Oliver Spryn
  • 16,871
  • 33
  • 101
  • 195
  • 2
    It is hard to tell without being able to test the actual extension, but by the fact that a lot of the CSS3 effects are not being applied, I expect it is being rendered using an IE document mode for an older version of IE. Are you including a doctype at all? Otherwise you might want to try setting the X-UA-Compatibility meta tag: http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx – David Storey Jan 24 '13 at 01:06
  • @dstorey Yes, the doctype of the ancient site my extension enhances is `HTML 4.01 Transitional`, although there is a line break between the first line of the source code and the DTD. – Oliver Spryn Jan 24 '13 at 01:21
  • 1
    What rendering mode does it say it is using in the F12 dev tools? If it is not IE9, does switching it to IE9 mode fix the issue? – David Storey Jan 24 '13 at 01:24
  • 1
    @dstorey Wooo-hooo! It was in IE9 compatibility mode. Even IE8 mode looked better... It was rendering at the level of IE7! Also, the document mode looks best in IE8 standards or IE9 standards mode. Is there a way to force IE to use IE8 or IE9 browser mode with the latest document mode? – Oliver Spryn Jan 24 '13 at 01:34
  • 1
    This page tells you how to use the X-UA-compatibility meta to allow this: http://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx . For example, forces IE9 standards mode. – David Storey Jan 24 '13 at 01:44
  • @dstorey Nice! If you will write your comment as answer I will accept it! – Oliver Spryn Jan 24 '13 at 04:46
  • @spryno724 I'm not sute that changing the x-ua-compatible meta using javascript will actually make the parser to change legitimately. Please update if this solution actually works for you using the extension. In case it fails to work, You would have to insert an ie_fixes.css that will fix the spesific issues you're having with the twitter bootstrap – Roman Krom Jan 24 '13 at 08:08
  • @RomanKrom Rats... I've just have to have the extension detect their browser mode and instruct them how to change it. – Oliver Spryn Jan 24 '13 at 15:37

1 Answers1

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.

David Storey
  • 29,166
  • 6
  • 50
  • 60