Rotazione CSS e IE: il posizionamento assoluto sembra interrompere IE

Sto provando a ruotare una varietà di blocchi di testo in modo che siano orientati verticalmente, e li posizioniamo in posizioni molto specifiche su un diagramma che verrà visualizzato in anteprima e quindi stampato. Il CSS ruota il testo molto bene in IE, FF, persino Opera.Rotazione CSS e IE: il posizionamento assoluto sembra interrompere IE

Ma quando provo a posizionare un elemento ruotato, IE 7 & 8 (non preoccupato per 6) si rompe completamente e l'elemento rimane nella sua posizione originale. In qualche modo intorno a questo? Ho davvero bisogno di controllare i pixel di dove si trovano queste etichette.

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; }

fonte

2010-04-13 doub1ejack

Qualche possibilità potresti fornire un collegamento in diretta? –

Questo suona come un problema con cui ho trascorso molto tempo. Ho lasciato due commenti su Paul Irish's blog post nel dettaglio delle mie scoperte. Ecco quello che ho scritto:

IE6 e 7: È necessario dichiarare almeno altezza o larghezza sul div che è intenzione di essere ruotato prima del tuo filtri rotazione appaiono nel CSS. Anche se si esegue questa operazione, tuttavia, gli eventuali stili applicati a tale div dopo che i filtri di rotazione appaiono nel codice non verranno applicati. Lo stesso sembra essere essere vero per tutti gli stili applicati a quei bambini div div. Strano.

IE8: Questo sembra non essere un problema. I applicato con successo gli stili al div (inclusa la dichiarazione dell'altezza o della larghezza per la prima volta) dopo che i filtri di rotazione appaiono nel codice.

... e più la rotazione CSS stranezza a riferire:

in IE6 e 7, anche se si seguono le regole ho postato alcuni commenti indietro, sarà ancora completamente rompere il tuo sito se si utilizza più di un filtro di rotazione per file CSS esterno. È necessario avere file CSS separati per filtro di rotazione o semplicemente aggiungere ogni filtro annidato nei propri tag univoci nella parte superiore del proprio html. In caso contrario, verrà visualizzato solo l'oggetto ruotato prima , ma anche questo sarà sfocato e con l'angolo non corretto .

Hilariously, rimuovendo il DOCTYPE fa sì che tutta la rotazione di rendere perfettamente, quindi sto assumendo quirks mode sa come gestire molteplici rotazione filtri? Inoltre, con un foglio di stile complesso più grande, più , c'erano anche effetti collaterali più strani, , ma non ero in grado di individuare quello che stava causando lo . ogni modo ...

portare il messaggio a casa:

Utilizzare solo 1 Filtro ms proprietarie: (quando viene utilizzato per la rotazione, almeno) per foglio di stile esterno. e .. Ciascun filtro di rotazione nel codice HTML deve essere nel proprio set di tag di stile.

Anche se il mio problema era leggermente diverso, è possibile che si stia verificando una situazione simile con i due div interni ruotati dal genitore. Vale la pena sparare. Almeno prova a spostare il delclaration .rotate in fondo al foglio di stile.

fonte

2010-11-04 04:18:18 Masondesu

Trovo che questo funziona se si mette le rotazioni sulle txtblocks, invece che sul contenitore esterno.

Demo

fonte

2010-04-13 15:18:10 graphicdivine

Ho provato anche questo. Le voci ruotano, ma non vengono visualizzate in modo coerente tra IE e FF. Stavo ruotando il contenitore per cercare di ottenere un posizionamento uniforme. Ho appena visto che IE7 sembra ruotare elementi posizionati in modo assoluto e che IE8 sta avendo problemi. – doub1ejack

Prova di questo codice:

<!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>

si sta applicando il codice per l'elemento sbagliato. Anche come riferimento ad altri nella comprensione di questo http://snook.ca/archives/html_and_css/css-text-rotation

fonte

2010-04-13 15:22:21 easwee

Grazie, ma a cascata non dovrebbe? La posizione dei bambini dovrebbe essere relativa al loro genitore - cioè, dovrebbero ricevere la stessa rotazione. E se non posso semplicemente ruotare il genitore, dovrei impostare la rotazione per ogni bambino ... e questa è una lista noiosa. – doub1ejack

Per quanto ne so filtro: usa javascript come base per fare tutti i calcoli quindi non è realmente css - quindi la cascata non si applica. Anche IE ha sempre avuto il suo modo di gestire le cose. P.s .: Segna come risolto se queste risposte ti hanno aiutato. – easwee

non funziona IE7 !! –

Rotazione CSS e IE: il posizionamento assoluto sembra interrompere IE

risposta

Problemi correlati