css - 宽度不适用于 iE 中的旋转

Question

我有一些表格，看起来像这样（在 Chrome、Opera、FF 中）：

但是 IE (7,8,9) 浏览器显示这个表格是这样的：

问题：如何调整列宽？

我有两个 css 类：对于 td 标签：

.td__vertical{
         text-align:center;
         vertical-align:bottom;
         border:  1px double  #8EB340 ;
         font-size:11px; 
         color:#666; 
         background-color: #F0F4E7; 
         padding: 0px 0px 20px 0px;
         margin: 0px 0px 0px 0px;
         width:30px;
}

对于 div，位于 td 标签内：

.rotated{
        transform: rotate(-90deg); 
        -webkit-transform: rotate(-90deg); 
        -moz-transform: rotate(-90deg);
        -o-transform-origin:      0 0;
        -o-transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        -ms-transform: rotate(-90deg);
        white-space: nowrap; 
        width: 30px;
}

所以专栏是这样描述的：

<td class="td__vertical"><div class="rotated" >Column2 Column2 Col..</div></td>

Chrome、Opera、FF 对“宽度：30px;”做出反应 在“旋转”类和“td__vertical”中的“宽度”无关紧要。但是 IE 没有使用其中的任何一个。旋转通过“矩阵”具有相同的效果。

UPD：我探索了一下，列宽就是文字的宽度，也就是文字在未旋转状态下的宽度。那么，如何关闭自动调整列宽？

Answer 1

如果您不关心 IE 中的文本从上到下读取，那么您可以使用书写模式：

-ms-writing-mode: tb-lr;

这相当于旋转90degs，无法模拟-90degs

当然，您需要删除filter: progidand ms-transform。

http://msdn.microsoft.com/en-us/library/ie/ms531187(v=vs.85).aspx