We're working on using some custom CSS in a Script Editor in our SharePoint 2013 environment and we discovered that the box-shadow which we are using does not display in IE9.

In looking into this it appears the default Seattle master page for SP2013 is hard-coded to have a "X-UA-Compatible" of "IE=10" instead of "IE=edge".

We tested our site using Chrome and IE10 and it displayed our box-shadow properly. IE9 however does not display the box-shadow.

I've thought about creating a custom master page which sets the X-UA-Compatible to be IE=edge but I'm not sure if that would break other aspects of the SP2013 sites or if there is an easier way to do this.

Any guidance you can provide is greatly appreciated.



4 Answers 4


Setting it to IE=edge wouldn't fix your IE9 issues. It should be falling back to IE9 mode automatically since it's set to IE=10. Are you sure there isn't an issue in your CSS for IE9 rendering? box-shadow does work in IE9, we have it one one of our sites (in 2010 and IE9 rendering).



Changing the Document Mode to edge will cause problems. (For example drag and drop for webparts does not work in IE 11)

box-shadow is supported in IE 9 so you should not have a problem here. http://caniuse.com/#feat=css-boxshadow


In IE9 you have to reference another CSS element in order to have box-shadow display. This works in Document-Mode:10.

You need the following: border-collapse: separate

For example:

.ms-core-deltaSuiteBarRight {
box-shadow:0 0 1px 0;
border-collapse: separate;

I hope this helps.


Edge mode also breaks anything that uses XPathResult with IE11, such as the Visio Embed webpart.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.