[h3]An Introduction[/h3]
All web designers have at some point battled with the pains of designing for multiple browsers to ensure consistency as well as adhering to web standards. One browser which seems to have made those pains more intense over the last 10 or so years is Internet Explorer.
There are hacks, fixes, workarounds and scripts that will help any web designer attempt to align their site to the latest in web standards and coding to provide the consistency we all desire over multiple platforms. It would be easier if we knew we could design and code for the latest browser versions, but, especially in the business world, this is rarely possible.
SharePoint 2010 unfortunately does not make things easy for us designers when trying to aim for the cutting edge of web standards and I want to explore one of the reasons in this blog post.
Internet Explorer 8, when released, was Microsoft’s most standards compliant browser yet, but in an effort to guarantee sites could work that didn’t meet these new standards, they provided a new tag to enable the browser to switch between modes, in other words emulate previous versions if required. (Further reading here). This tag only applies to Internet Explorer and is effectively ignored in Firefox, Chrome, Safari etc.
This tag is the “X-UA-Compatible” header and can be used like so: <meta http-equiv="X-UA-Compatible" content="IE=8" />
[h3]The Problem[/h3]
SharePoint 2010 master pages will tend to specify this tag with the IE=8 content property. However, this will then enforce your SharePoint site to tell Internet Explorer to run as IE8 even if it is IE9. This is a particular problem if you want to make use of any HTML5 or CSS3 coding that IE9 supports without resorting to additional scripts and hacks.
A simple enough fix is to specify a different value for the “X-UA-Compatible” header, either of the following for example:
[colored-disc-list style=’blue’]
[li]"IE=9" - directly specifies IE9[/li]
[li]"IE=edge" - specifies the use of the latest browser rendering mode[/li]
[/colored-disc-list]
But beware! Whilst setting this value to IE=9 or IE=edge will ensure your SharePoint 2010 sites can make use of the latest in web standards there are some downfalls that will not be immediately obvious. Your sites now uses funky coding and styling thanks to HTML5 and CSS3 but did you notice the following stop working correctly?
[colored-disc-list style=’blue’]
[li]People picker[/li]
[li]Drag and drop web parts between zones in edit mode[/li]
[/colored-disc-list]
It will likely affect other aspects too but there seems to be no complete list. The reason for this is that SharePoint 2010 uses javascript coding that is specific to IE8 and therefore will not render properly in more up to date versions.
[h3]A Suggested Solution[/h3]
Until SharePoint 2013 becomes the norm, many organisations will still be using SharePoint 2010 so my suggested workaround is as follows.
If your SharePoint site does not require the problem functions mentioned above in a front end user interface, then try using two different master pages.
- The defalt one uses IE=edge
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> - The system one uses IE=8
<meta http-equiv="X-UA-Compatible" content="IE=8" />
If your SharePoint site does require the problem functions in a front end user interface then unfortunately you will have to explore other ways to utilise modern web standards on these pages or sites