Règle CSS 3 transform et IE 6/7/8/9

Réduire
Ce sujet est fermé.
X
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Règle CSS 3 transform et IE 6/7/8/9

    Bonjour,

    J'utilise Joomla 3.1.1 avec un thème dérivé de Protostar et j'utilise la propriété "transform" de CSS 3 dans mon template.css lors du survol de la barre de navigation. L'effet fonctionne bien avec Google Chrome, Firefox, Opera, Safari et IE 10, mais dès que je teste le site sur des versions de Internet Explorer 9 et inférieure, le résultat est désastreux. J'ai essayé d'ajouter ceci dans mon index.php :

    Code:
    <!--[if lte IE 8]> <html class="ie678" lang="fr"> <![endif]-->
    et dans le template.css, j'ai ceci :

    Code:
    .nav-pills > .active > a:hover {
    	color: #fef6a7;
    	/*font-size: 1.4em;*/
    	background-color: transparent;
    	text-shadow: 4px 4px 3px #000;
        filter: dropshadow(color=#000, offx=4, offy=4);
        -moz-transform: scale(1.2);
    	-webkit-transform: scale(1.2);
    	-o-transform: scale(1.2);
    	transform: scale(1.2);
    	-ms-transform: scale(1.2);
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=2, M12=-0, M21=0, M22=2);
    	
    }
    
    .ie678 > .nav-pills > .active > a:hover {
    	color: #fef6a7;
    	/*font-size: 1.4em;*/
    	background-color: transparent;
    	text-shadow: 4px 4px 3px #000;
        filter: dropshadow(color=#000, offx=4, offy=4);
       /* IE8+ - must be on one line, unfortunately */ 
       -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.2, M12=0, M21=0, M22=1.2, SizingMethod='auto expand')";
       
       /* IE6 and 7 */ 
       filter: progid:DXImageTransform.Microsoft.Matrix(
                M11=1.2,
                M12=0,
                M21=0,
                M22=1.2,
                SizingMethod='auto expand');
    
    
       /*
        * To make the transform-origin be the middle of
        * the object.    Note: These numbers
        * are approximations.  For more accurate results,
        * use Internet Explorer with this tool.
        */
       margin-left: -15px; 
       margin-top: -6px;    
    }
    malheureusement ça ne fonctionne pas. Est-ce que je suis tout de même sur la bonne piste ? J'ai trouvé cette méthode dans l'article suivant :

    Les meilleures astuces pour le développement web de qualité


    si cette méthode est bonne, quelle erreur je fais dans son application ?

    L'URL du site est : http://test.savs-epilepsies.fr

    Merci
    Dernière édition par LaurentR2D2 à 03/06/2013, 01h35

  • #2
    Re : Règle CSS 3 transform et IE 6/7/8/9

    la balise html est déja déclarée, donc tu ne peut ajouter ta classe.
    essaye en ciblant ta balise body...

    Commentaire


    • #3
      Re : Règle CSS 3 transform et IE 6/7/8/9

      Envoyé par lefabdu51 Voir le message
      la balise html est déja déclarée, donc tu ne peut ajouter ta classe.
      essaye en ciblant ta balise body...
      Parfait. Merci. Il ne me reste plus qu'à explorer les diverses pistes pour que mon site passe dans le plus de versions de IE possible

      Commentaire

      Annonce

      Réduire
      Aucune annonce pour le moment.

      Partenaire de l'association

      Réduire

      Hébergeur Web PlanetHoster
      Travaille ...
      X