CSS : radius sur IE 7 et IE 8
voici une méthode maison en jquery qui fonctionne bien sur des objets à fond plein (background-color) , et qui peut être modifiée/adaptée à d'autres situation si vous touchez un peu le code.
Il suffit de mettre la classe "radius" sur les objets à arrondir , puis d'ajouter ce code dans un de vos fichier js ou dans le code html de la page (de préférence à la fin).
Nécessite d'avoir installer jquery sur votre page.
Le code va tout simplement selectionner tous les objets de classe "radius" , les passer en position relative et ajouter dedans des petits div blanc aux 4 coins.
<!--[if lte IE 8]>
<script>$( function() {
$('.radius').each( function() {
$(this).css('position','relative');
$(this).append('<div style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;top:0;left:0"></div>');
$(this).append('<div style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;top:0;right:0"></div>');
$(this).append('<div style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;bottom:0;left:0"></div>');
$(this).append('<div style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;bottom:0;right:0"></div>');
});
});</script>
<![endif]-->
Pour améliorer et grossir l'arrondis en le lissant, on peut ajouter encore 2 petits points blancs à coté des 4 premiers, puis les rendre semi transparent pour avoir un effet de lissage , voici la version ainsi complétée:
<!--[if lte IE 8]>
<script>$( function() {
$('.radius').each( function() {
$(this).css('position','relative');
$(this).append('<div style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;top:0;left:0"></div>');
$(this).append('<div style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;top:0;right:0"></div>');
$(this).append('<div style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;bottom:0;left:0"></div>');
$(this).append('<div style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;bottom:0;right:0"></div>');
$(this).append('<div class="semi" style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;top:0;left:1px"></div>');
$(this).append('<div class="semi" style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;top:0;right:1px"></div>');
$(this).append('<div class="semi" style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;bottom:0;left:1px"></div>');
$(this).append('<div class="semi" style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;bottom:0;right:1px"></div>');
$(this).append('<div class="semi" style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;top:1px;left:0"></div>');
$(this).append('<div class="semi" style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;top:1px;right:0"></div>');
$(this).append('<div class="semi" style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;bottom:1px;left:0"></div>');
$(this).append('<div class="semi" style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;bottom:1px;right:0"></div>');
});
$('.semi').fadeTo(0,0.5);
});</script>
<![endif]-->
4 590 clics - Créé le 21/12/2010 par Tito - Modifié le 21/12/2010