Les mythiques coins arrondis de CSS3 ont souvent créé des soucis aux intégrateurs, notamment à cause d'Internet Explorer 6, 7 et 8. En a résulté de nombreux hacks, détournement, techniques plus ou moins réussies via Javascript afin d'émuler ce comportement sur ces navigateurs.

Une technique consiste à indiquer avec les préfixes vendeurs la propriété border-radius et à la répéter sans lesdits préfixes, pour le jour où la propriété puisse fonctionner sans ces derniers (ce qui est le cas pour les dernières versions de Firefox par exemple), ce qui nous donne donc :

#madivronde{
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
behavior:url(border-radius.htc);
}

La technique ci-dessus est une extension HTC, il suffisait de rajouter la dernière ligne dans l'exemple, et de mettre le fichier border-radius.htc dans le bon répertoire, et tout marchait bien sous IE.

J'ai bien dit "marchait". J'ai récemment dû reprendre un projet qui avait utilisé cette technique, et que ne fut ma surprise quand sous Internet Explorer 9, l'affichage était complètement cassé !

Après investigation, il apparait que ce dernier n'appréciait pas du tout behavior:url(border-radius.htc);. Si les trois premières lignes suffisent à faire nos coins arrondis sous IE9 et les autres navigateurs, évidemment, cela ne marche plus sous les versions inférieures à IE9.

La seule solution consiste donc à utiliser les commentaires conditionnels pour créer une autre CSS destinée à IE8 et inférieurs :

<!--[if lte IE 8]>
 <link href="ie_8_fixes.css" 
   rel="stylesheet" 
   type="text/css" />
<![endif]-->

dans laquelle on mettra seulement :

#madivronde{
behavior:url(border-radius.htc);
}

Ainsi, tout fonctionnera correctement sous IE 6, 7, 8 et 9 (ouf), et sous les autres navigateurs également.