在IE7，IE8，IE9和IE10中只有CSS的垂直文本只有

Question

有誰知道如何在IE7，IE8，IE9和IE10中僅使用CSS成功實現垂直文本？ （由垂​​直文本，我指的是文本中逆時針旋轉90度）

這就是我今天已經實現了，我覺得應該是正確的：

.counterclockwise-text { 

/* Chrome/Safari */ 
-webkit-transform: rotate(-90deg); 
-webkit-transform-origin: 50% 50%; 

/* Firefox */ 
-moz-transform: rotate(-90deg); 
-moz-transform-origin: 50% 50%; 

/* IE9 */ 
-ms-transform: rotate(-90deg); 
-ms-transform-origin: 50% 50%; 

/* This should work for IE10 and other modern browsers that do not need vendor prefixes */ 
transform: rotate(-90deg); 
transform-origin: 50% 50%; 

/* IE8 or less - using the "\9" CSS hack so that other browsers will ignore these lines */ 
zoom: 1\9; 
writing-mode: tb-rl\9; 
filter: flipv fliph; 

} 

然而，IE10不忽略「\ 9」CSS破解 - 它將拾取這些值並將文本旋轉90度。一個有用的解決方案將是一種在IE8和更低版本中執行垂直文本的方法，IE10不會提取它。我真的想避免使用僅限IE8的樣式表，或者使用媒體查詢來檢測IE10。我只是想找一種方法來修改上面的CSS，以便在所有瀏覽器中都有垂直文本。謝謝！

編輯：

對於什麼是值得的，我也嘗試下面的代碼使用過濾器來旋轉文本。這可能適用於大多數情況，但在我的實例中，很多文本被包裝元素的限制（非旋轉？）約束切斷。

.counterclockwise-text { 

/* Chrome/Safari */ 
-webkit-transform: rotate(-90deg); 
-webkit-transform-origin: 50% 50%; 

/* Firefox */ 
-moz-transform: rotate(-90deg); 
-moz-transform-origin: 50% 50%; 

/* IE9 */ 
-ms-transform: rotate(-90deg); 
-ms-transform-origin: 50% 50%; 

/* IE10 and other modern browsers that do not need vendor prefixes */ 
transform: rotate(-90deg); 
transform-origin: 50% 50%; 

/* IE8 */ 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 

/* IE7 or less */ 
*zoom: 1; 
*writing-mode: tb-rl; 
*filter: flipv fliph; 

} 

我還沒有找到一種方法來做到這一點與IE10和IE8的純CSS的快樂。

Answer 1

您應該對較老的IE使用條件註釋。
原來他們都是爲了它不會有什麼傷害，也沒有破解（荷蘭國際集團負責人）小號:)

Answer 2

這裏是純CSS（+ 1周爲每個文本額外的div）解決方案

適用於所有IE版本IE7-10

https://gist.github.com/aiboy/7406727

Answer 3

有同樣的問題，但隨着旋轉的附加文本可讀性不好，我會建議不要使用：

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

爲IE9或IE 8

那是，什麼工作對我來說：

p.css-vertical-text { 
    color:#333; 
    border:0px solid red; 
    writing-mode:tb-rl; 
    -webkit-transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
    -o-transform: rotate(90deg); 
    white-space:nowrap; 
    display:block; 
    bottom:0; 
    width:20px; 
    height:20px; 
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif; 
    font-size:24px; 
    font-weight:normal; 
    text-shadow: 0px 0px 1px #333; 
} 

從http://scottgale.com/css-vertical-text/2010/03/01/