IE and problems with CSS3, especially rounded corners.

I like rounded corners. They look soothing, or as my friend would say: feng shui ;)

Occasionally I take on some work which is less hardcore than programming, just to stay in touch with the latest and relax my brain with something different.
This time I've created one small web-tool for someone. Or a small page as one may call it.

I'm always working on linux, so MSIE is the last browser I test my pages on, though I've been sleeping happily because apparently all new versions of MSIE are supposedly rendering CSS3 without any problems.

Guess what? They don't. At least not out of the box.

My customer is going to be using this web-tool on MSIE 9 equipped computers and huge was my disappointment when I've seen my beautiful, carefully designed page in IE 9. Yuck!

Took a while, but the most silly thing Microsoft people could have done (I can't think of it in different terms than as a bug) is the need for a specific meta tag in order to have proper rendering turned on.

In this case:

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

Why in hell would you have to turn on rendering of CSS3 (and other features) in a browser that is advertised as CSS3 capable? To me that implies it works without extra work. Apparently less so to Microsoft engineers.

Don't get me wrong. I can see the positives too! That meta tag gives you plenty to play with. Other options of content you can set are:

• "IE=edge"
• "IE=10"
• "IE=EmulateIE10"
• "IE=9"
• "IE=EmulateIE9
• "IE=8"
• "IE=EmulateIE8"
• "IE=7"
• "IE=EmulateIE7"
• "IE=5"

In other words you can push newer browsers to try and behave like the old ones, which is a heaven sent to web designers, I imagine). But still I think the default should be render and not expect any quirky meta tags to be set.

The "IE=EmulateIE" options tell browsers to render content in Standard mode, while, the ones without  "Emulate" expect Quirks mode to be applied.

"IE=edge" - will push for the highest mode available. So for MSIE 9 that is equivalent to "IE=9".

Definitions by Microsoft:

Internet Explorer supports a number of document compatibility modes that enable different features and can affect the way content is displayed:

• IE10 mode provides the highest support available for established and emerging industry standards, including the HTML5, CSS3 and others.
• IE9 mode provides the highest support available for established and emerging industry standards, including the HTML5 (Working Draft), W3C Cascading Style Sheets Level 3 Specification (Working Draft), Scalable Vector Graphics (SVG) 1.0 Specification, and others. [Editor Note: IE 9 does not support CSS3 animations].
• IE8 mode supports many established standards, including the W3C Cascading Style Sheets Level 2.1 Specification and the W3C Selectors API; it also provides limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft) and other emerging standards.
• IE7 mode renders content as if it were displayed in standards mode by Internet Explorer 7, whether or not the page contains a directive.
• Emulate IE9 mode tells Internet Explorer to use the directive to determine how to render content. Standards mode directives are displayed in IE9 mode and quirks mode directives are displayed in IE5 mode. Unlike IE9 mode, Emulate IE9 mode respects the directive.
• Emulate IE8 mode tells Internet Explorer to use the directive to determine how to render content. Standards mode directives are displayed in IE8 mode and quirks mode directives are displayed in IE5 mode. Unlike IE8 mode, Emulate IE8 mode respects the directive.
• Emulate IE7 mode tells Internet Explorer to use the directive to determine how to render content. Standards mode directives are displayed in Internet Explorer 7 standards mode and quirks mode directives are displayed in IE5 mode. Unlike IE7 mode, Emulate IE7 mode respects the directive. For many web sites, this is the preferred compatibility mode.
• IE5 mode renders content as if it were displayed in quirks mode by Internet Explorer 7, which is very similar to the way content was displayed in Microsoft Internet Explorer 5.
• Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 9, this is equivalent to IE9 mode. If a future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9.

As of Internet Explorer 10, quirks mode behaves differently than it did in earlier versions of the browser. In Windows Internet Explorer 9 and earlier versions, quirks mode restricted the webpage to the features supported by Microsoft Internet Explorer 5.5. In Internet Explorer 10, quirks mode conforms to the differences specified in the HTML5 specification.
There is also chrome=1 that you can use or use together with one of the above options, EX: chrome=1 is for Google's Chrome Frame which is defined as:

Google Chrome Frame is an open source browser plug-in. Users who have the plug-in installed have access to Google Chrome's open web technologies and speedy JavaScript engine when they open pages in the browser.

Google Chrome Frame seamlessly enhances your browsing experience in Internet Explorer. It displays Google Chrome Frame enabled sites using Google Chrome’s rendering technology, giving you access to the latest HTML5 features as well as Google Chrome’s performance and security features without in any way interrupting your usual browser usage.