Вертикальный текст с использованием чистого CSS непоследовательно во всех браузерах

Question

я начал свой код на основе этого примера: https://gist.github.com/aiboy/7406727

Я не хочу вариант 90 градусов, но на 270 градусов, поэтому чтение направление работает снизу вверх.

В IE11 текст проходит сверху вниз. В Chrome он работает снизу вверх, однако он отображается вне контейнера для упаковки.

Как я могу заставить это работать в FireFox, Chrome и IE8-IE11?

<style type="text/css"> 
.text-container { 
    float: left; 
} 

.rotated-text { 
    display: inline-block; 
    background-color:red; 
    width: 1.5em; 
} 
.rotated-text__inner { 
    display: inline-block; 
    white-space: nowrap; 
    /* this is for shity "non IE" browsers 
     that dosn't support writing-mode */ 
    -webkit-transform: translate(1.1em,0) rotate(270deg); 
     -moz-transform: translate(1.1em,0) rotate(270deg); 
     -o-transform: translate(1.1em,0) rotate(270deg); 
      transform: translate(1.1em,0) rotate(270deg); 
    -webkit-transform-origin: 0 0; 
     -moz-transform-origin: 0 0; 
     -o-transform-origin: 0 0; 
      transform-origin: 0 0; 
    /* IE9+ */ 
    -ms-transform: none; 
    -ms-transform-origin: none; 
    /* IE8+ */ 
    -ms-writing-mode: tb-rl; 
    /* IE7 and below */ 
    *writing-mode: tb-rl; 
} 
.rotated-text__inner:before { 
    content: ""; 
    float: left; 
    margin-top: 100%; 
} 
</style> 



<div class="text-container"> 
    <div class="rotated-text"><span class="rotated-text__inner">Easy</span></div> 
</div>  

Answer 1

Мое решение не является чисто CSS, так как это требует немного реструктуризации HTML, но то, что я хотел бы сделать это поворот на 90º вокруг верхнего левого происхождения, затем повернуть внутренний контейнер 180º вокруг центра. Это касается Chrome, Firefox, Safari и похоже, что вы уже знаете, что делать с IE.

http://jsfiddle.net/nwduefdz/

HTML:

<div id="outer"> 
    <div id="inner">Vertical text, bottom to top!</div> 
</div> 

CSS:

#outer { 
    background-color: red; 
    color: white; 
    line-height: 1em; 
    padding: .5em; 
    -webkit-transform: translateX(2em) rotate(90deg); 
    -moz-transform: translateX(2em) rotate(90deg); 
    -ms-transform: translateX(2em) rotate(90deg); 
    transform: translateX(2em) rotate(90deg); 
    -webkit-transform-origin: 0 0 0; 
    -moz-transform-origin: 0 0 0; 
    -ms-transform-origin: 0 0 0; 
    transform-origin: 0 0 0; 
    float: left; 
} 
#inner { 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    transform: rotate(180deg); 
}