0

除了 IE 10，我的代码几乎可以在所有浏览器中运行。

它在 IE 7 和 8 中运行良好。

这是我的测试页面 - http://hoffcomm.com/mc/chart/

这是我最初获得代码的地方 - 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>
4

2 回答 2

2

将以下行添加到".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 浏览器或用户浏览器特定的前缀黑客。

于 2013-09-23T08:24:32.723 回答
0

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

于 2013-06-19T14:55:09.630 回答