You may find that the OOTB V4 master page has the Meta tag: <meta http-equiv=”X-UA-Compatible” content=”IE=8″/>. This renders the page in IE8 mode even when using IE9.
Web Designers may realise that this means CSS3 rounded corners are not available (http://www.css3.info/preview/rounded-border/). Unfortunately removing this tag breaks SharePoint’s ability to drag and drop web parts between web part zones and a few other quirky things.
Rounded corners in CSS3 use anti-aliasing to give a clean smooth effect. It also renders very fast. Using jQuery.corner.js sometimes slows the page down and causes a slight flicker, the rendering is not as sharp as the CSS3.
To optimise the loading so that IE uses jQuery rounded corners and all other modern browsers use CSS3, I used the following code:
<!–[if IE]>
<script type=”text/javascript”>
jQuery(document).ready(function() {
jQuery(‘.right-wp-zone-core-1’).corner(“12px”);
});
</script>
<![endif]–>
<style type=”text/css”>
.right-wp-zone-core-1{
-moz-border-radius: 12px;
border-radius: 12px;
}
</style>
A bit disappointed with the rendering in IE9 but ensures that all browsers get the best experience possible.
The problem is not that CSS3 doesn’t work with IE 9 (it does very well!) but SharePoint 2010 does not work with IE9 (e.g. dragging web parts, people picker, etc…) so Microsoft force with default Master Page into IE8 mode using the meta tag.
Hopefully there is an update to IE9 soon (maybe automatic??) to fix SharePoint compatibility and then we can all happily use CSS rounded corners!!
