Make your website compatible with the latest web standards.
Document compatibility defines how a browser will render your website. The more detailed you communicate your requirements to the browser, the better the user experience will be. When using web standards like HTML5, you should clearly declare the HTML5 document type from the outset:
This tag will trigger standard mode in IE9 and IE10, and it works very well in Chrome and Firefox as well. The following four steps can help your website render properly across different browsers and devices:
Step 1: Ensure your website is using standard mode
Check whether the website is currently in standard mode:
1. Open the website in the IE10 Platform Preview.
Note: You can also update the document mode in IE9 using the same steps without downloading the preview version.
2. Press the F12 key to launch the IE Developer Tools, or find it in the Tools menu.
Note: If you are not familiar with using the IE F12 Developer Tools to debug web pages, please read the linked tutorial.
3. Check if the website displays 'Browser Mode: IE10' and 'Document Mode: IE10 standards'.
If your website is already in Browser Mode: IE10 and Document Mode: IE10 standards states, then you're all set! Note that if your website's browser mode and document mode are not like this, a common scenario is Browser Mode = IE8 and Document Mode = Quirks (Browser mode = IE8, Document mode = Quirks), indicating that the site was designed for older versions of IE and may not meet web standards requirements.
Step 2: Implement document mode under web standards
Force the use of IE10 standard mode to test your website:
Insert the following tag into the HTML page of the website
To learn how to update the doctype, please refer to here.
Reload the page in the browser, and use the F12 Developer Tools to check browser mode and document mode again. If 'Browser Mode: IE10' and 'Document Mode: IE10 standards' do not show, proceed to the following steps.
Step 3: Determine why the website is not in standard mode
Many issues are related to supporting older versions of IE. First, ensure that standard-based code renders correctly in IE9 and IE10. Only then retain non-standard code used to support older versions of IE.
My page is not in 'Browser Mode: IE10'
Possible reasons: Your website may be in Compatibility View, forcing it into older browser modes to ensure the website functions properly.
Solution: Check if the website is on this list. For more on compatibility view lists and requesting removal from the list, refer to here.
My webpage is not 'Document Mode = IE10'
Possible reasons: Your website's doctype is invalid or missing.
Solution: Check if a valid, correctly formatted doctype is used, as shown below:
Possible reasons: Document mode is forcibly limited by the X-UA-Compatible meta tag. To learn how to update the doctype, refer to here.
Solution: Check whether there is code similar to the one below on the page.
Step 4: Resolve common IE issues when updating document mode
Remove the found codes and reload the page. Continue testing. To learn how to specify document compatibility mode, refer to here.
Many issues are related to supporting older versions of IE. First, ensure that standard-based code renders correctly in IE9 and IE10. Only then retain non-standard code used to support older versions of IE.
Possible reasons: Conditional comments support features related to different browser versions.
Solution: Check whether there are conditional comments running non-standard code. These are often used to support specific features of older IE versions to allow the page to achieve graceful degradation in old versions. Check for code similar to below:
Possible reasons: User agent listeners support features related to browser versions.
Remove the found code, reload the page, and continue testing. To learn more about conditional comments, refer to here.
Solution: Check for the existence of user agent listeners. User agent listeners locate the browser through the user agent string present in the browser mode. Check for code similar to the one below:
if(version = /MSIE (d+.d+)/.exec(navigator.userAgent)) {
isIE = true;
browserVersion = parseFloat(version[1]);
}
}
Other reasons that may cause the webpage to not display properly: First, implement feature detection using web standards. To learn more about user agent strings, refer to here. For information about the user agent string for IE10, refer to here.
Possible reasons: The website may be using specific features that are no longer supported by the browser. Use web standards as much as possible.
Solution: Run a compatibility checking tool.
Possible reasons: The website may be using third-party plugins or Flash, Quicktime, and Silverlight unsupported by Metro IE10. Use web standards as much as possible.
Solution: Learn how to create experiences without plugins. A complete beginner tutorial will be released soon.
Possible reasons: The website may have loaded specific versions of the browser CSS files.
Solution: Ensure layouts avoid CSS hacks as much as possible. To learn how to check for CSS issues, refer to here.
A list of common questions is provided in the IE Compatibility Cookbook.
If you still cannot update the document mode through the solutions described above, please refer to MSDN forums.
For more details, please refer to the following articles:
Define Document Capability @ MSDN
Investigate Document Mode Issues @ MSDN
Interoperable Quirks Mode in IE10 @ IE Blog
Compatibility Inspector Tool @ IETestDrive.com
Don't forget to add Doctype @ W3C.org
Content sourced from: http://blog.reybango.com/2012/01/09/fix-common-ie-problems-update-your-docmode-for-web-standards/