在 IE 和 Firefox 中垂直显示文本（旋转 90 度）答案

【问题标题】：Display text vertically (rotated 90 degrees) in IE and Firefox在 IE 和 Firefox 中垂直显示文本（旋转 90 度）
【发布时间】：2011-03-10 19:30:21
【问题描述】：

我有一个包含 asp GridView 的页面，我想垂直显示文本以便更好地打印。目前我正在使用 css 来做到这一点： .rotate { -webkit-transform: rotate(-90deg); -moz 变换：旋转（-90 度）；宽度：25px； }

在 FF 中有效，除了 25px 宽度被忽略，在 IE 中宽度设置正确但文本不是垂直的。任何人都知道如何在这两种浏览器中进行这项工作？

【问题讨论】：

标签： asp.net css text rotation

【解决方案1】：

这是一个使用 CSS 的 -90 度旋转，应该可以在 IE 中使用：

.box_rotate {
    -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;
}

供您参考http://css3please.com/ 是生成此类 CSS 效果的好工具，具有很好的跨浏览器支持。

如果没有具体示例，我无法真正说出为什么宽度不适用于 FF，但您可以尝试设置 display:block;

【讨论】：