Comment faire des images inversées horizontalement bien dans IE7

Question

Je travaille sur un projet qui prend en charge de nombreuses langues différentes. Nous ajoutons actuellement l'hébreu, qui est une langue de droite à gauche. Pour cette raison, une grande partie de notre mise en page doit être reflétée. J'ai créé un script qui fera beaucoup de ceci automatiquement, mais les images doivent également être reflétées. Nous avons une classe appelée .rtl qui va retourner tout ce qui est dedans horizontalement (normalement seulement appliqué aux images). La classe est la suivante:

.rtl { 
    -moz-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    transform: scaleX(-1); 
    filter: FlipH; 
    -ms-filter: "FlipH"; 
} 

Ce flips correctement les images multi-navigateur, mais il semble que IE < 10 a très mauvais artefacts de rendu. Y a-t-il un moyen de remédier à cela? La seule alternative est de garder un fichier png en miroir pour chaque image de notre projet (ce qui est beaucoup), donc ce n'est pas une solution très faisable. J'ai joint une image montrant le problème avec IE7 en haut et Chrome (qui semble correct) sur le fond. Dans les langues normales, le texte est sur la gauche et l'image est sur la droite, mais dans les langues de droite à gauche cela a dû être retourné, donc la flèche a dû être retournée, et aussi l'effet "lueur" sur le texte ainsi que.

Answer 1

Vous pouvez essayer d'appliquer des parenthèses à votre filtre comme suit: filter:fliph(). La deuxième approche que vous pourriez essayer est la syntaxe de IE5.5-9 qui ressemblerait à ceci: filter: DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1) recommande MSDN recommande. Si cela ne vous aide pas, vous devriez essayer Modernizr.