twitter bootstrap 3 - Pages does not render properly in IE 11 when using the bootsrapv3.0.0 theme

Question

I have a very simple XPage with a table and some input fields. The application uses the bootstrapv3.0.0 theme and the OpenNtf bootstrap4Xpages plugin released on 2014-01-28. I think I'm using correct markup according to bootstrap-3 documentation. The page renders just fine in Chrome, but it's a mess in IE 11. In IE the table seems to get cut at a fixed width of approx. 100px and the characteristic blue border on selected “bootstrapped” input fields does not show up as it should Buttons styled with btn-warning display as expected, also in IE. This tells me that at least some of the styles is applied correctly in IE as well Anyone else who have run into this problem? Any tips on a possible solution (dropping support for IE is not an option)?

Answer 1

Are you running IE11 in compatibility mode? Try turning off compatibility mode and see if the site loads.

By default intranet sites load in compatibility mode, which I think really means your web site is going to look awful if it was made in the last 15 years mode.

Per Henrik Lausten has an xSnippet that can display a warning to your users if they are running like so. http://openntf.org/XSnippets.nsf/snippet.xsp?id=display-warning-message-if-internet-explorer-uses-compatibility-view-mode