豎排文字是跨瀏覽

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