表格单元格中的IE中的垂直文本 [英] Vertical text in IE within a table cell

问题描述

我试图在跨越几行的瘦表格单元格中旋转一些文本跨浏览器。我想要它是一个很好的紧凑摘要的行，这就是为什么它是薄和旋转-90度。以下所述的提示：

HTML表格中的垂直（旋转）文本

工作方式类似于charm，除了在惊喜惊喜中，IE，文本被旋转，

 <$ c $ 
 c> #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 =labelrowspan =3>< span>最近< / span>< / td& 
  

如果你能让我超越这个，你将是我的英雄）。

解决方案

我创建了2个CSS，一个用于IE，一个用于其余的浏览器。对于IE我使用了：

  style =color：black; line-height：20px; writing-mode： filter：flipH（）flipV（）; 
  

I'm trying to rotate some text cross browser within a thin table cell that spans a few rows. I want it to be a nice compact summary of the rows, which is why it is thin and rotated -90 degrees. The tips described here:

Vertical (rotated) text in HTML table

work like a charm except in, surprise surprise, IE, where the text is rotated, but the text is clipped to the width of the cell.

Here are the relevant styles:

#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;
}

and the html:

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

You will be my hero if you can get me past this one :)

解决方案

I created 2 CSS, one for IE and one for the rest of the browsers. For IE I used:

style="color:black; line-height:20px; writing-mode: tb-rl; filter: flipH() flipV();"

这篇关于表格单元格中的IE中的垂直文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！