Question

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

在示例中，您可以看到具有正常行为的水平div和具有2个问题的水平div： 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 */
}

Answer 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

用文本旋转div。 Safari的问题

1 个答案: