Drehen von Text mit CSS und IE

Question

Ich muss Text mit CSS rotieren. Ich habe die folgenden Stilregeln, aber sie scheinen im Internet Explorer nicht zu funktionieren.

.footer #descr span {
    -moz-transform: rotate(-20deg);  /* Firefox */
    -o-transform: rotate(-20deg);  /* Opera */
    -webkit-transform: rotate(-20deg);  /* Safari y Chrome */
    transform: rotate(-20deg);  /* Safari y Chrome */
    font-size:40px;
    display:block;
    float: left;
    margin: 0 10px 0 0;
}

Wie kann ich Text im IE mit CSS rotieren?

Answer 1

Unterhalb von IE9 bietet der Internet Explorer praktisch keine integrierte Unterstützung für CSS3 oder andere Standard Webtechnologien wie SVG, die es Ihnen ermöglichen, Text plattformübergreifend zu drehen. Microsoft bietet seit dem IE6 zwei Möglichkeiten zum Drehen von Elementen (z. B. Text), wobei die einfachere Methode nur in Schritten von 90 Grad funktioniert, etwa so:

-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* 0=0, 1=90, 2=180, 3=270 */

Wenn Sie wirklich die 340/-20 Grad erreichen wollen, die Sie in Ihrem Beispiel angegeben haben, müssen Sie sich an etwas Schwierigerem versuchen, das hier dokumentiert ist: MSDN Matrix-Filter . In Anbetracht der unnötigen Komplexität, die dies darstellt, ergab eine schnelle Google-Suche einen netten Rechner, der eine -ms-filter CSS-Regel für Sie: Matrix-Rechner .

Denken Sie daran, dass diese beiden Funktionen im IE9 veraltet sein sollen, der meiner Meinung nach folgende Funktionen unterstützt -ms-transform stattdessen. Je nachdem, ob Microsoft "veraltet" als "entfernt" oder "abgeraten" definiert, sollten Sie überprüfen, ob der IE9 Ihren Text nicht doppelt dreht.

.footer #descr span {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
    -ms-transform: rotate(-20deg); /* IE9+ */
    -moz-transform: rotate(-20deg);  /* Firefox */
    -o-transform: rotate(-20deg);  /* Opera */
    -webkit-transform: rotate(-20deg);  /* Safari & Chrome */
    transform: rotate(-20deg);
    font-size:40px;
    display:block;
    float: left;
    margin: 0 10px 0 0;
}

Um ganz ehrlich zu sein, wenn Sie beabsichtigen, HTML5 und/oder CSS3 zu verwenden, dann würde ich der Antwort von Duopixel zustimmen, dass es sinnvoll wäre, eine CSS3-Bibliothek über Javascript einzubinden. Da Benutzer von Windows XP nicht über den IE8 hinaus aktualisieren können, ist es für jede kommerzielle Website eine gute Idee, diesen zu unterstützen.

Answer 2

Damit dies im IE < 9 funktioniert, müssten Sie CSS Sandpapier verwenden, ein Polyfill für CSS-Transformationen: http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

Answer 3

Das einzige, was in meiner Situation funktionierte, war die Verwendung von CSS Sandpaper - sobald ich das integriert hatte, versuchte ich den folgenden CSS-Code...

#vertbar p.name {
    -sand-transform: rotate(180deg);
}

und voila! Der IE hat den Text vertikal gedreht und von unten nach oben gelesen. In allen anderen Browsern wird diese Ausrichtung jedoch als 270 Grad betrachtet.

In anderen Browsern wurde der Text in einem anderen Winkel als im IE gedreht, als ob das IE-Koordinatensystem von hinten nach vorne verläuft (was mich nicht überraschen würde...)

Ich dachte, ich versuche es mal mit einem bedingten Kommentar, um die -sand-transform Regel nur für IE-Browser. Aus welchem Grund auch immer ignorierte der IE dies und so wurde die Drehung nicht einmal angewendet (ignoriert der IE10 bedingte Kommentare?)

Nun hatte ich das Problem, alle Browser dazu zu bringen, das Gleiche zu tun. Indem ich die Reihenfolge der Regeln neu anordnete und 180 Grad für den IE und 270 Grad für die anderen einstellte, hatte ich endlich eine CSS-Regel, die den Text vertikal drehte und von unten nach oben las, in Firefox, Chrome, Safari und IE!

#vertbar p.name {
    -sand-transform: rotate(180deg);
    -webkit-transform: rotate(270deg) !important;
    -moz-transform: rotate(270deg) !important;
    -o-transform: rotate(270deg) !important;

    font-size: 14px;
    text-transform: capitalize;
    display: block;
    white-space: nowrap;
    height: 330px;
    text-align: left;
    color: #FFF;
    line-height: 40px;
    margin-top: 0px;
}

Hurra! Hoffentlich hilft das jemandem, ich habe über 2 Stunden damit verschwendet, das zu klären :P

Update: Ich wollte nur eine Korrektur vornehmen - 270 Grad ist in allen Browsern 270 Grad. Ich entdeckte, dass ich eine weitere Regel mit einer Drehung von 90 Grad hatte, die zu einer zweiten Regel von 180 Grad addiert wurde, um insgesamt 270 Grad zu erhalten. Es war also interessant festzustellen, dass der Wert der Drehung relativ (zusätzlich?) und nicht absolut ist.

Answer 4

Ältere Versionen des IE (8 und darunter) unterstützen kein CSS3

Answer 5

Der IE unterstützt einige CSS3-Funktionen nicht. Die Lösung: Lassen Sie es im IE gracefully degradieren und lassen Sie Menschen mit einem modernen Browser moderne Websites genießen.