Question

除了IE 10之外，我的代码几乎可以在所有浏览器中使用。

在IE 7和IE中工作正常8。

这是我最初获得代码的地方 - http://erraticdev.blogspot.com/2011/08/cross-browser-vertical-text.html

任何帮助都将不胜感激。

这是我的CSS。

 .container
{
/* this will give container dimension, because floated child nodes don't give any */
/* if your child nodes are inline-blocked, then you don't have to set it */
overflow: auto;
}
.container .head
{
    /* float your elements or inline-block them to display side by side */
    float: left;
    /* these are height and width dimensions of your header */
    height: 10em;
    width: 1.5em;
    /* set to hidden so when there's too much vertical text it will be clipped. */
    overflow: hidden;

    /* these are not relevant and are here to better see the elements */

}
    .container .head .vert
    {
        /* line height should be equal to header width so text will be middle aligned */
        line-height: 1.5em;
        /* setting background may yield better results in IE text clear type rendering */
   font-weight: bold;
        display: block;

        /* this will prevent it from wrapping too much text */
        white-space: nowrap;
        /* so it stays off the edge */
        padding-left: 3px;

        /* IE specific rotation code */
        writing-mode: tb-rl;
        filter: flipv fliph;

        /* CSS3 specific totation code */
        /* translate should have the same negative dimension as head height */
        transform: rotate(270deg) translate(-10em,0);
        transform-origin: 0 0;
        -moz-transform: rotate(270deg) translate(-10em,0);
        -moz-transform-origin: 0 0;
        -webkit-transform: rotate(270deg) translate(-10em,0);
        -webkit-transform-origin: 0 0; }

这是我的实际HTML代码

<table border="0" cellpadding="5" cellspacing="0" width="772px">
<td style="border-left: none;"></td>
<td style="border-top: 1px solid black; background-color: #b0d8f9; font-size: 14px;">
<div class="container"><div class="head"><div class="vert">Flexography</div></div></div>
</td>
<td style="border-top: 1px solid black; background-color: #b0d8f9; font-size: 14px;">
<div class="container"><div class="head"><div class="vert">Gravure</div></div></div>
</td>
<td style="border-top: 1px solid black; background-color: #b0d8f9; font-size: 14px;">
<div class="container"><div class="head"><div class="vert">Offset     Lithography</div></div></div>
</td>
<td style="border-top: 1px solid black; background-color: #b0d8f9; font-size: 14px;">
<div class="container"><div class="head"><div class="vert">Screen Process</div></div></div>
</td>
<td style="border-top: 1px solid black; background-color: #b0d8f9; font-size: 14px;">
<div class="container"><div class="head"><div class="vert">Thermal</div></div></div>
</td>
<td style="border-top: 1px solid black; background-color: #b0d8f9; font-size: 14px;">
<div class="container"><div class="head"><div class="vert">Latex Printing</div></div></div>
</td>
<td style="border-top: 1px solid black; background-color: #b0d8f9; font-size: 14px;">
<div class="container"><div class="head"><div class="vert">Aqueous Inkjet</div></div></div>
</td>
<td style="border-top: 1px solid black; background-color: #b0d8f9; font-size: 14px;">
<div class="container"><div class="head"><div class="vert">UV-cure inkjet</div></div></div>
</td>
<td style="border-right: 1px solid white;" valign="bottom"><b>BEST USED FOR</b></td>
<td style="border-left: none;" valign="top"></td>
</tr>

Answer 1

将以下行添加到".container .head .vert"块可以解决您的问题：

-ms-transform: rotate(270deg) translate(-10em,0);
-ms-transform-origin: 0 0;

此外，您需要删除以下行以使其在IE 10中工作

/* IE specific rotation code */
writing-mode: tb-rl;
filter: flipv fliph;

您可以将这些行放在单独的CSS中，用于较旧的IE浏览器或用户浏览器特定的前缀黑客。

Answer 2

您忘记在css中使用-ms-前缀。

IE在IE 10中旋转属性

2 个答案: