CSS Rotazione & IE: posizionamento assoluto sembra rompere IE

StackOverflow https://stackoverflow.com/questions/2630504

Domanda

Sto cercando di ruotare una serie di blocchi di testo in modo che siano orientati verticalmente, e la posizione in posizioni molto specifiche su un diagramma che sarà in anteprima e poi stampati. CSS ruota il testo molto bene in IE, FF, anche Opera.

Ma quando provo a posizionare un elemento ruotato, IE 7 e 8 (non preoccupato 6) rompe completamente e la soggiorni elemento nella sua posizione originale. Qualsiasi modo per aggirare questo? Ho davvero bisogno di controllo to-the-pixel di cui 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;  }
È stato utile?

Soluzione

Questo suona come un problema che ho trascorso un bel po 'di tempo con. Ho lasciato due commenti su post sul blog di Paul Irish dettagliare le mie conclusioni. Ecco quello che ho scritto:

  

IE6 e 7: è necessario dichiarare almeno   altezza o la larghezza del div che del   andando a ruotare PRIMA del vostro   filtri di rotazione appaiono nel CSS.   Anche se fare questo, però, qualsiasi   stili applicati a che div dopo il   filtri rotazione appaiono nel codice   non sarà applicata. Lo stesso sembra   essere vero per tutti gli stili applicati a che   figli di div pure. Strano.

     

IE8: Questo sembra non essere un problema. io   applicato con successo stili al div   (Compresi dichiarando la sua altezza o   larghezza per la prima volta) dopo la   filtri di rotazione appaiono nel codice.

... e molto altro CSS rotazione stranezza di report:

  

In IE6 e 7, anche se si segue la   regole che ho postato qualche commento indietro,   si continua totalmente rompere il tuo sito   se si utilizza più di una rotazione   Filtro per file CSS esterno. voi   o avere file CSS separati   per filtro rotazione, o semplicemente aggiungere   ogni filtro annidato nel suo proprio unico   tag di stile nella testa del codice HTML.   In caso contrario, verrà visualizzato solo il   primo oggetto ruotato, ma anche questo   sarà sfocata e alla non corretta   angolazione.

     

Hilariously, la rimozione del DOCTYPE   provoca la rotazione tutto per rendere   perfettamente, così sto assumendo quirks mode   sa come gestire la rotazione multipla   filtri? Inoltre, con una più grande, più   foglio di stile complesso, ci sono stati anche   gli effetti collaterali più strano, ma non potevo   individuare che cosa stava causando quelli.   In ogni modo ...

     

Prendere un messaggio a casa:

     

L'uso del filtro solo 1 ms proprietarie:   (Quando utilizzato per la rotazione, almeno) per   foglio di stile esterno. e .. Ogni   Filtro di rotazione nel tuo html deve essere   in una propria serie di tag di stile.

Anche se il mio problema era leggermente diverso, si potrebbe essere in esecuzione in una situazione simile con i due div interni in rotazione dal genitore. E 'girato un patrimonio. Almeno provare a spostare il delclaration .rotate alla parte inferiore del foglio di stile.

Altri suggerimenti

Prova 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 per gli altri nella comprensione di questo http://snook.ca/archives/html_and_css/ css-text-rotazione

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

Demo

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top