77 votes

CSS3 transform : tourner ; dans IE9

J’ai un élément qui doit être verticale dans un design que j’ai fait. J’ai obtenu le css pour que cela fonctionne dans tous les navigateurs sauf IE9. J’ai utilisé le filtre pour IE7 et IE8 :

Cela semble toutefois rendre mon élément transparent dans IE9 et le CSS3 « transformer » porperty ne semble pas faire n’importe quoi !

Est-ce que quelqu'un sait de toute façon de rotation d’éléments dans IE9 ?

Apprécie beaucoup l’aide !

W.

139voto

Spudley Points 85371

La norme CSS3 tourner devraient travailler dans IE9, mais je crois que vous avez besoin de lui donner un vendeur préfixe, comme suit:

  -ms-transform: rotate(10deg);

Il est possible qu'il ne fonctionne pas dans la version bêta; si pas, essayez de télécharger à l'actuelle version preview (aperçu 7), qui est une révision ultérieure de la beta. Je n'ai pas la version beta à tester, donc je ne peux pas confirmer si c'est dans cette version ou pas. La version finale est certainement prévu pour le soutenir.

Je peux aussi confirmer que l'IE-spécifique filter de la propriété a été abandonnée dans IE9.

[Modifier]
Les gens ont demandé un peu plus de documentation. Comme ils le disent, c'est assez limité, mais je n'ai trouver cette page: http://css3please.com/ ce qui est utile pour tester les différents CSS3 dans tous les navigateurs.

Mais les tests de rotation fonction de cette page dans IE9 aperçu causé le blocage assez spectaculaire.

Cependant j'ai fait quelques indépendant de tests à l'aide d' -ms-transform:rotate() dans IE9 dans mes propres pages de test, et il fonctionne très bien. Donc, ma conclusion est que la fonctionnalité est implémentée, mais a eu quelques bugs, probablement lié à la définition de cette dynamique.

Un autre point de référence utile pour les fonctions qui sont mises en œuvre dans les navigateurs qui est www.canIuse.com -- voir http://caniuse.com/#search=rotation

[MODIFIER]
Revivre cette vieille réponse parce que j'ai récemment trouvé un hack appelé CSS du papier de verre , ce qui est pertinent pour la question et peut rendre les choses plus faciles.

Le hack de cette prise en charge de la norme CSS transform pour pour les anciennes versions d'IE. Alors maintenant, vous pouvez ajouter les lignes suivantes à votre fichier CSS:

-sand-transform: rotate(10deg);

...et qu'il fonctionne dans IE 6/7/8, sans avoir à utiliser l' filter de la syntaxe. (bien sûr, il utilise toujours la syntaxe du filtre derrière les scènes, mais cela le rend beaucoup plus facile à gérer, parce que c'est en utilisant la même syntaxe que pour les autres navigateurs)

5voto

Alpesh Panchal Points 11

Essaye ça

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
}
.rotate {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
}
</style>
</head>

<body>
<div class="rotate">Alpesh</div>
</body>
</html>
 

4voto

J’ai aussi eu des problèmes avec les transformations dans IE9, j’ai utilisé `` et il n’a pas fonctionné. Tout ce que j’ai pu essayé, mais le problème a été en mode navigateur, pour faire des transformations fonctionnent, que vous devez définir le mode de compatibilité pour « IE9 Standard ».

3voto

Steve Points 1

Je sais que c'est vieux, mais j'ai eu ce même problème, trouvé ce post, et alors qu'il n'a pas expliquer exactement ce qui n'allait pas, il m'a aidé à le droit de réponse - alors j'espère que ma réponse vous aide à quelqu'un d'autre qui pourrait être d'avoir un problème similaire à la mienne.

J'ai eu un élément que je voulais rotation verticale, c'est donc naturellement que j'ai ajouté le filtre: pour IE8 et puis l'-ms-transform propriété pour IE9. Ce que j'ai trouvé est que le fait d'avoir l'-ms-transform propriété ET le filtre est appliqué à la même élément provoque IE9 pour rendre l'élément très mal. Ma solution:

  1. Si vous êtes à l'aide de la transformation-origine de propriété, d'en ajouter un pour MS (-ms-transform-origin: en bas à gauche;). Si vous ne voyez pas votre élément, il se pourrait qu'il est en rotation sur son axe du milieu et en laissant ainsi la page d'une certaine manière - alors vérifiez que.

  2. Déplacer le filtre: la propriété pour IE7 et 8 d'une feuille de style séparée et d'utiliser un IE conditionnel pour insérer une feuille de style pour les navigateurs moins de IE9. De cette manière, il n'affecte pas la IE9 styles et tout devrait fonctionner correctement.

  3. Assurez-vous d'utiliser le bon DOCTYPE balise ainsi; si vous avez tort IE9 ne fonctionne pas correctement.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X