Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #312

IE9 is not rendering rounded corners, box shadows and transparencies, and other CSS styles correctly, what could be the issue?

The Answer

Prepared Jul. 2013 by Gerry Jacobsen, PVII

We often get emails and phone calls from customers unable to explain why their CSS round corners, box-shadows, RGBA transparencies, etc. look perfect on their computer - while clients are reporting that these CSS techniques do not work in IE9 on their computers.

How could this be? In 2 words: Compatibility View. Many people accidentally click the little CV icon at the right edge of the address bar. IE9 goes into Compatibility Mode and displays pages as if it were IE7. No round corners, no shadows - you get the picture.

You can force IE9 to stay in Standards Mode. In fact, you can make the CV icon disappear for your pages. All it takes is this little Meta tag in the head of your page:

HTML version:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

xhtml version:

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

That's it.

IE9 (and IE8 too) will also lock in their own Standards Mode.

Note: If you are using an HTML5 DOCTYPE and are concerned (you should not be) with perfect validation, you can simply add the meta tag inside a generic IE conditional comment:

<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<![endif]-->

 

Back to the questions list