Tweet
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 :
et dans le template.css, j'ai ceci :
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 :
si cette méthode est bonne, quelle erreur je fais dans son application ?
L'URL du site est : http://test.savs-epilepsies.fr
Merci
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]-->
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;
}
si cette méthode est bonne, quelle erreur je fais dans son application ?
L'URL du site est : http://test.savs-epilepsies.fr
Merci
Commentaire