使用纯 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);
}

使用纯 CSS 的垂直文本在浏览器之间不一致

Vertical text using pure CSS is inconsistent across browsers

css

vertical-text