旋转带有文本的 div。 Safari 的问题答案

【问题标题】：Rotate a div with text. Problems with Safari旋转带有文本的 div。 Safari 的问题
【发布时间】：2014-08-06 22:48:17
【问题描述】：

我尝试旋转一个带有文本的 div。我可以旋转它，但我很困惑：
- 为什么它不在左：0 位置？
- 为什么它只有在旋转时才会失去定义？这只发生在 Safari 上。（它适用于 Chrome 和 Firefox）

在示例中，您可以看到具有正常行为的水平 div 和具有 2 个问题的水平： http://jsfiddle.net/YLpPj/

HTML：

<div id="vertical">vertical button</div>
<div id="horizontal">horizontal button</div>

CSS：

body {
    font-family:sans-serif;
    text-align:center;
    font-size:14px;
    color:#666;
    letter-spacing:1px;
    margin:0; padding:0;
}

#horizontal {
    position:fixed;
    top:200px; left:0px;
    width:150px; height:35px; line-height:35px;
    background:#f2f2f2;
}

#vertical {
    position:fixed;
    top:20px; left:0px;
    width:150px; height:35px; line-height:35px;
    background:#f2f2f2;

    /* different, to rotate: */
    -webkit-transform: rotate(90deg);/* Safari and Chrome */
    -moz-transform: rotate(90deg); /* Firefox */
    -ms-transform: rotate(90deg); /* ie9 */
    -o-transform: rotate(90deg); /* Opera */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* ie8 */
    writing-mode:tb-rl; /* ie8 */
}

【问题讨论】：

浏览器根据你的left和top设置元素位置，然后旋转。
好的，谢谢。这是有道理的。文本的定义呢？
文本垂直时，失去清晰度。我认为这只发生在 Safari 上。

标签： css rotation

【解决方案1】：

您可以使用此代码。

HTML Code:

<div class="vertical">
<table class="tab">
    <tr>
        <td>F</td>
    </tr>
    <tr>
        <td>E</td>
    </tr>
    <tr>
        <td>E</td>
    </tr>
    <tr>
        <td>D</td>
    </tr>
    <tr>
        <td>B</td>
    </tr>
    <tr>
        <td>A</td>
    </tr>
    <tr>
        <td>C</td>
    </tr>
    <tr>
        <td>K</td>
    </tr>
</table>

CSS Code:

.vertical {
height:auto;
width:25px;
background-color:violet;
color:white;
border-radius:5px;
}
.tab
 {
    margin-left:5px;
}

Live Demo of Vertical Text in Div

【讨论】：