Vous êtes ici : Accueil Zaclys Astuces / Les rubriques / Informatique / Web / PHP

Voir un article

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 540 clics - Créé le 21/12/2010 par Tito - Modifié le 21/12/2010



Réagissez, commentez, discutez ...

InfoSoyez le premier à réagir !



Partager ?

diaspora  G+  facebook  twitter  Digg  Yahoo  Delicious  Technorati  myspace


Voir d'autres articles en rapport avec celui-ci ?



Stats des clics sur cet article : cliquez ici »



Vous voulez contribuer et publier un article dans cette rubrique ?

InfoMerci de vous identifier ou de vous créer un compte si ce n'est pas déjà fait.


ATTENTION
Vous êtes ici sur l'ancien site de l'association Zaclys.
Depuis 2019 notre site est ici : nouveau site Zaclys

icone user Me connecter :

InfoMerci de saisir vos identifiants.




Me reconnecter automatiquement à chaque visite sur ce navigateur :
               





retour






Plan du site | Aide | Mentions légales et CGU | RGPD | Travaux et incidents | Budget | Faire un don | Chouchen | Z pub | Logo et prospectus

© Association la mère Zaclys 1998-2021  - Zaclys v2.5

Suivez nous sur Diaspora, Mastodon, Google+, FaceBook ou Twitter