IE表格单元格中的垂直文本

Question

我正在尝试在跨越几行的瘦表格单元格中旋转一些文本跨浏览器.我希望它是一个很好的紧凑的行总结,这就是为什么它很薄并旋转-90度.这里描述的提示:

HTML表格中的垂直(旋转)文本

工作就像一个魅力,除了惊喜,IE,文本旋转,但文本被剪裁到单元格的宽度.

以下是相关款式:

#schedmenu td.label {
/*width:22px;*/
/*width:100%*/
vertical-align:middle;
font-size:12.5px;
}


#schedmenu td.label span {
display:block;
-moz-transform: rotate(-90deg);  /* FF3.5+ */
  -o-transform: rotate(-90deg);  /* Opera 10.5 */
 -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
        filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
                M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
                M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */
          zoom: 1;

color:white;
position:relative;
top:12px;
}

和HTML:

<td class="label" rowspan="3"><span>Recent</span></td> 

如果你能让我超越这一个你将成为我的英雄:)

Answer 1

如果我是你，我会打开 InkScape 并创建三个不同的图像。

或者，由于您已经有打印屏幕图像，只需裁剪它即可。并将它们作为背景图像。

我经常做一些非常漂亮的 CSS 设计，可以在 Chrome 和 Firefox 中使用，然后打印屏幕，裁剪它并用图像替换实际设计，这一切都可以在 IE 中使用。

或跨度：显示：块和高度：100％；??