CSS Rotation & IE: le positionnement absolu semble rompre IE

J'essaye de faire pivoter une variété de blocs de texte pour qu'ils soient orientés verticalement, et les positionner dans des endroits très précis sur un diagramme qui sera prévisualisé puis imprimé. CSS tourne très bien le texte dans IE, FF, même Opera.CSS Rotation & IE: le positionnement absolu semble rompre IE

Mais lorsque j'essaie de positionner un élément pivoté, IE 7 & 8 (pas concerné par 6) se casse complètement et l'élément reste dans son emplacement d'origine. De toute façon autour de cela? J'ai vraiment besoin de contrôler les pixels de l'emplacement de ces étiquettes.

HTML

<div class="content rotate"> 
    <div id="Div1" class="txtblock">Ardvark Avacado<br />Awkward</div> 
    <div id="Div2" class="txtblock">Brownies<br />Bacteria Brussel Sprouts</div> 
    </div>

CSS

div.content { 
    position: relative; 
    width: 300px; 
    height: 300px; 
    margin: 30px; 
    border-top: black 4px solid; 
    border-right: blue 4px solid; 
    border-bottom: black 4px dashed; 
    border-left: blue 4px dashed; } 

.rotate { 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } 

.txtblock { 
    width: auto; 
    position: absolute; 
    } 

#Div1 { 
    left:44px; 
    top:70px; 
    border:red 3px solid; } 

#Div2 { 
    left:13px; 
    top:170px; 
    border:purple 3px solid; }

Source

2010-04-13 doub1ejack

Une chance que vous pourriez fournir un lien direct? –

Cela ressemble à un problème que j'ai passé beaucoup de temps avec. J'ai laissé deux commentaires sur le blog post de Paul Irish détaillant mes découvertes. Voici ce que je l'ai écrit:

IE6 et 7: Vous devez déclarer au moins hauteur ou la largeur de la div qui est va être être tourné avant votre filtres de rotation apparaissent dans le CSS. Même si vous faites cela, cependant, tous les styles appliqués à ce div APRÈS que les filtres de rotation apparaissent dans le code ne seront pas appliqués. La même chose semble être vrai pour tous les styles appliqués aux enfants de div. Bizarre.

IE8: Cela ne semble pas être un problème. I appliqué avec succès les styles à la div (y compris en déclarant sa hauteur ou largeur pour la première fois) après les filtres de rotation apparaissent dans le code.

... et plus bizarreries de rotation CSS à signaler:

Dans IE6 et 7, même si vous suivez les règles j'ai posté quelques commentaires en arrière, vous encore totalement casser votre site si vous utilisez plusieurs filtres de rotation par fichier CSS externe. Vous devez soit avoir des fichiers CSS distincts par filtre de rotation, ou simplement ajouter chaque filtre imbriqué dans ses propres balises de style dans la tête de votre code HTML. Si ce n'est pas le cas, le premier objet pivoté s'affichera, mais même ce sera flou et à l'angle incorrect .

Hilariously, en supprimant le DOCTYPE provoque toute la rotation de rendre parfaitement, donc je suppose que le mode bizarreries sait comment gérer la rotation de plusieurs filtres ? En outre, avec une feuille de style plus complexe, plus , il y avait même effets secondaires plus bizarres, mais je ne pouvais pas identifier exactement ce qui les causait. Quoi qu'il en soit ...

Take message d'accueil:

utilisation seulement 1 filtre exclusif ms: (lorsqu'il est utilisé pour la rotation, au moins) par feuille externe. et .. Chaque filtre de rotation dans votre code HTML doit être dans son propre jeu de balises de style.

Même si mon problème était légèrement différent, vous pourriez vous retrouver dans une situation similaire avec les deux divs internes tournés par le parent. Ça vaut le coup. Au moins essayez de déplacer la delarration .rotate vers le bas de la feuille de style.

Source

2010-11-04 04:18:18 Masondesu

Je trouve que cela fonctionne si vous mettez les rotations sur les txtblocks, plutôt que sur le récipient extérieur.

Demo

Source

2010-04-13 15:18:10 graphicdivine

J'ai aussi essayé. Les éléments pivotent, mais ils ne sont pas affichés de manière cohérente entre IE et FF. Je faisais tourner le conteneur pour essayer d'obtenir un positionnement uniforme. Je viens de voir que IE7 semble tourner des éléments absolument positionnés, et que c'est IE8 a des problèmes. – doub1ejack

Essayez ce code:

<!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> 
    <title>Centrsource najboljše Ponudbe</title> 
    <style type="text/css"> 
    #content { 
    position: relative; 
    width: 300px; 
    height: 300px; 
    margin: 30px; 
    border-top: black 4px solid; 
    border-right: blue 4px solid; 
    border-bottom: black 4px dashed; 
    border-left: blue 4px dashed; 
    } 

.txtblock { 
display:block; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    } 


    </style> 
</head> 
<body> 
<div id="content"> 
    <div class="txtblock">Ardvark Avacado<br />Awkward</div> 
</div> 
</body> 

</html>

Vous appliquez le code à l'élément erroné. Aussi comme référence à d'autres dans la compréhension de cela

Source

2010-04-13 15:22:21 easwee

Merci, mais il en cascade ne devrait-il pas? La position des enfants devrait être relative à leur parent, c'est-à-dire qu'ils devraient recevoir la même rotation. Et si je ne peux pas simplement faire tourner le parent, je devrais régler la rotation pour chaque enfant ... et c'est une liste fastidieuse. – doub1ejack

Pour autant que je sache filtre: utilise javascript comme base pour faire tous les calculs donc ce n'est pas vraiment css - donc la cascade ne s'applique pas. IE a toujours eu sa façon de gérer les choses. P.s .: Marquer comme résolu si cette réponse vous a aidé. – easwee

son ne fonctionne pas IE7 !! –

CSS Rotation & IE: le positionnement absolu semble rompre IE

Répondre

Questions connexes