Why Aren\'t My Table Cell\'s Top Corners Rounding in IE9?

Border-Radius Troubles in IE9: A Corner Case

Issue: I'm unable to achieve rounded corners on the top left and right edges of a table cell in IE9, although the same code works flawlessly in Firefox, Chrome, and Safari. What's missing?

Code Snippet:

border-left: solid 1px #444f82;
border-right:solid 1px #444f82;
border-top:solid 1px #444f82;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
-moz-border-radius-topright: 7px;
-webkit-border-top-right-radius: 7px;
-khtml-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-top-left-radius: 7px;
-khtml-border-radius-topleft: 7px;
behavior: url(/survey_templates/PIE.htc);

Answer:

While border-radius is supported in IE9, it requires an additional step to enable compatibility. To resolve this issue, add the following meta header to your page:

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

The "edge" value instructs IE to use its latest rendering engine, ensuring that it interprets CSS features such as border-radius correctly. Therefore, in IE9, it will use the built-in engine instead of the compatibility mode that's known to cause problems with some CSS styles.

The above is the detailed content of Why Aren\'t My Table Cell\'s Top Corners Rounding in IE9?. For more information, please follow other related articles on the PHP Chinese website!