Why does IE9 switch to compatibility mode on my website?

by

Works in IE9 documentMode for me.

Without a X-UA-Compatible header/meta to set an explicit documentMode, you’ll get a mode based on:

  • whether the user has clicked the ‘compatibility view’ button in that domain before;
  • perhaps also whether this has happened automatically due to some other content on the site causing IE8/9’s renderer to crash and fall back to the old renderer;
  • whether the user has opted to put all sites in compatibility view by default;
  • whether IE thinks the site is on your intranet and so defaults to compatibility view;
  • whether the site in question is in Microsoft’s own list of websites that require compatibility view.

You can change these settings from ‘Tools -> Compatibility view settings’ from the IE menu. Of course that menu is now sneakily hidden, so you won’t see it until you press Alt.

As a site author, if you’re confident that your site complies to standards (renders well in other browsers, and uses feature-sniffing to decide what browser workarounds to use), I suggest using:

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

or the HTTP header:

X-UA-Compatible: IE=Edge

to get the latest renderer whatever IE version is in use.

More Related Contents:

  1. IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
  2. ie9 border radius
  3. Target IE9 Only via CSS [duplicate]
  4. Applying an ellipsis to multiline text [duplicate]
  5. Freeze the top row for an html table only (Fixed Table Header Scrolling)
  6. CSS – How to Style a Selected Radio Buttons Label?
  7. Table with fixed header and fixed column on pure css
  8. Use css gradient over background image
  9. Flexbox not giving equal width to elements
  10. Disabled form fields not submitting data [duplicate]
  11. White space at top of page
  12. How does the vertical-align property work?
  13. Why are dashes preferred for CSS selectors / HTML attributes?
  14. Style not working for innerHTML in Angular [duplicate]
  15. How to Set Height for the Drop Down of Select box
  16. Internet Explorer 9 Drag and Drop (DnD)
  17. Is it possible to always show up/down arrows for input “number”?
  18. How to center-align one flex item and right-align another using Flexbox [duplicate]
  19. When I try to shift the image upwards using negative margin the whole container is moved upwards
  20. What is the browser-default background color when selecting text?
  21. How to center image horizontally within a div element?
  22. CSS Expressions
  23. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  24. What’s the difference between HTML’s and CSS’s width attribute?
  25. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  26. How do I make flex box work in safari?
  27. Zebra striping a flexbox table with wrapping items
  28. Removing unwanted table cell borders with CSS
  29. Bootstrap row and col explanation
  30. How to implement a Navbar Dropdown Hover in Bootstrap v4?

Leave a Comment