僅限CSS的IE7，IE8，IE9和IE10中的垂直文本

Question

有沒有人知道如何只用CSS在IE7，IE8，IE9和IE10中成功實現垂直文本？ （通過垂直文本，我指的是文本逆時針旋轉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;

}

我仍然沒有找到一種方法來使用純CSS，IE10和IE8很高興。

Answer 1

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

適用於IE7-10的所有IE版本

/** 
 * Works everywere ( IE7+, FF, Chrome, Safari, Opera )
 */
.rotated-text {
    display: inline-block;
    overflow: hidden;
    width: 1.5em;
}
.rotated-text__inner {
    display: inline-block;
    white-space: nowrap;
    /* this is for shity "non IE" browsers
       that doesn't support writing-mode */
    -webkit-transform: translate(1.1em,0) rotate(90deg);
       -moz-transform: translate(1.1em,0) rotate(90deg);
         -o-transform: translate(1.1em,0) rotate(90deg);
            transform: translate(1.1em,0) rotate(90deg);
    -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%;
}

/* mininless css that used just for this demo */
.container {
  float: left;
}

HTML示例

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="rotated-text"><span class="rotated-text__inner">Easy</span></div>
  </div>
   <div class="container">
    <div class="rotated-text"><span class="rotated-text__inner">Normal</span></div>
     </div>
   <div class="container">
    <div class="rotated-text"><span class="rotated-text__inner">Hard</span></div>
</div>
</body>
</html>

來源： https ： //gist.github.com/obenjiro/7406727

Answer 2

您應該對舊的IE使用條件注釋。
他們的意思是什么，它不會傷害也不會破壞（頭腦） s :)

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/

僅限CSS的IE7，IE8，IE9和IE10中的垂直文本

問題描述

3 個解決方案

解決方案1
6 2013-11-12 11:01:56

解決方案2
2 2013-06-25 01:47:43

解決方案3
0 2014-02-11 13:18:40

僅限CSS的IE7，IE8，IE9和IE10中的垂直文本

問題描述

3 個解決方案

解決方案1 6 2013-11-12 11:01:56

解決方案2 2 2013-06-25 01:47:43

解決方案3 0 2014-02-11 13:18:40

解決方案1
6 2013-11-12 11:01:56

解決方案2
2 2013-06-25 01:47:43

解決方案3
0 2014-02-11 13:18:40