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

发布于 2024-09-07 20:45:09 字数 215 浏览 6 评论 0原文

我有一个包含 asp GridView 的页面，我想垂直显示文本以使其打印效果更好。目前我正在使用 css 来做到这一点： .rotate { -webkit-transform: 旋转(-90deg); -moz变换：旋转（-90度）；宽度：25 像素；除了 25px 宽度被忽略之外，它

在 FF 中有效，并且在 IE 中宽度设置正确，但文本不是垂直的。有人知道如何在两种浏览器中实现此功能吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等你爱我 2024-09-14 20:45:10

这是使用 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;

Here's a -90 degree rotation using CSS that should work in 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;
}

For your reference http://css3please.com/ is a good tool for generating these kind of CSS effect with pretty good cross browser support.

I can't really say why the width isn't applying in FF without a concrete example, but you might try setting display:block;

回复收藏 0 原文

~没有更多了~