IE: Avoiding broken screen components due to Quirks mode

Screen Structure

Screen Design

Screen Layout

Screen Rendering

Problem

When you are facing issues with Internet Explorer whereby some screen components like texts, dropdowns or input fields look broken, then your solution probably runs in Quirks mode.

Solution

Press F12 in IE to open the toolbar (at the bottom of the page) and check in which browser and document mode the page is running. Quirks mode is basically an IE5 compatibility mode: it is triggered by not having a valid DOCTYPE declaration in the HTML head. This results in a strange IE behavior meaning that it will use the IE5 box-model, and all your margins, paddings, borders and any styling which affects the size of a "box" will be incorrect.

First, the browser mode is something the site cannot change. It is set before the browser requests content from the site and specifies how the browser is identified to the site. The document mode, however, can be changed by the author by including an X-UA-Compatible meta tag or by the DOCTYPE used. Having these settings applied in your solution - in the outer wrapper template - will override the browser's default settings.

Second, using compatibility mode is only useful for testing to simulate how IE would render your site in earlier versions and can be changed - as seen in the screenshot above - by changing it in the F12 toolbar. BUT this will not change it for the site as a whole, only for the current session. To change it globally, go to "Tools > Compatibility View Settings" and either remove your site from the already added box and/or unstick the checkbox (in the lower part of the dialogue) "Display all websites in Compatibility View". An extension is also available to bypass this (IEDocumentModePatch).

So, if you want to avoid that your solution is running in a "wrong" mode, you should make sure that you:
1) Always define a DOCTYPE
2) Include a meta tag to override the browser's default document mode setting

The first option must always be configured as your browser will run the site in Quirks mode unless you have defined any DOCTYPE; further, Appway does not try to prevent this (yet) by automatically setting a DOCTYPE. The second option only needs to be applied when you want your solution to run in a specific document mode, e.g. IE7 Standards.

Here's the solution:

1) Define the DOCTYPE

2) Declare the meta tag (if required)

X-UA-Compatible is the name of the meta element and "IE=edge" is the value. "Edge" explained by the MSDN page: "Edge mode tells Windows Internet Explorer to display content in the highest mode available, which actually breaks the “lock-in” paradigm. With Internet Explorer 8, this is equivalent to IE8 mode. If a (hypothetical) future release of Internet Explorer supported a higher compatibility mode, pages set to Edge mode would appear in the highest mode supported by that version; however, those same pages would still appear in IE8 mode when viewed with Internet Explorer 8. "

Sources:
http://stackoverflow.com/questions/3449286/force-ie-compatibility-mode-off-in-ie-using-tags
http://stackoverflow.com/questions/6731001/whats-the-difference-between-quirks-mode-and-compatibility-mode-in-ie
http://stackoverflow.com/questions/15838605/force-browser-and-document-mode-to-ie9-in-ie10

Could this article be better?Yes, let me send feedback

Back to Cookbook

Comments (0)

Developer is transitioning to Appway Community

All material for Appway 6 is still available here on developer.appway.com during the transition to Appway Community.

Material for Appway 6.3 and Appway 7 is available in the Knowledge Base on community.appway.com.

Note: The Community Blog, our Forum, and the Support system are available exclusively on Appway Community.

Any questions or feedback? Please contact community@appway.com

Cookbook

IE: Avoiding broken screen components due to Quirks mode

How Could This Recipe be Improved?

Developer is transitioning to Appway Community

See Also

COOKBOOK