二、利用Text Rotation来实现

Jonathan Snook 在他的文章《Text Rotation with CSS》中提到用Text Rotation来实现这种效果。这里对其作简要的描述。

如今，很多主流的浏览器如Webkit和Firefox(从3.5开始)都支持旋转HTML元素。那么要使其垂直排列，就可以利用该属性。但须为每种浏览器加上前缀。

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

对于IE浏览器，可以使用一个称之为BasicImage 的滤镜来达到目的，该滤镜能够旋转任何具有layout属性的元素。但字体较之于使用图片来说，并不显得平滑。

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

该滤镜可以接受四个属性值0、1、2、3，其对应旋转的角度分别为0、90、180、270。尽管它还具有mirroring、masking、greyscale 等属性，但在此对我毫无意义。

在Jonathan Snook的这篇文章的留言中，Ashish 提到在IE中使用css的一个属性writing-mode:tb-rl可以得到同样的效果，本人做过测试，的确可以使文本垂直排列。但与旋转文本略有不同，主要体现在文字起始的方向上。另外，本人在IEtest中测试IE8，使用BasicImage好像不能生效。

查查示例

三、总结

对比两种方法。很明显，第一种方法无论是浏览器支持上还是视觉效果的美观上都强于第二种，唯一感到不足的是css代码较长。第二种方法虽不甚完美，但其实现过程并不复杂，不需要任何图片，但作为一种开拓思路的尝试也未尝不可。

本文链接：http://www.blueidea.com/tech/web/2009/6968.asp　

出处：Denis'Blog
责任编辑：bluehearts

上一页 日期垂直排列的两种技巧 [1] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。