跨浏览器的元素的竖直排列

之前在 CSS汉字竖写(column)里谈过使用css3的多栏布局实现文字竖写，而对于ie而言，其本身支持了不少文字排版的属性，比如writing-mode、direction、layout-flow等，可以实现文字的竖排，再结合inline-block我们也可以实现块级元素的竖排。 首先先实现跨浏览器的元素竖排： 方案：

• firefox chrome safari使用 column实现；
• ie6 ie7 ie8 使用writing-mode以及其私有的滤镜实现;

这里推荐两篇介绍ie系列的文字属性及兼容的文章：

CSS 兼容性和 Internet Explorer -ms-writing-mode Attribute | writingMode Property 蓝色理想关于文字竖排的讨论 The CSS Corner: writing-mode

writing-mode和layout-flow都能实现文字从右向左，从上到下的排版，而且相对于整个元素的90度旋转方法而言，这两个属性只针对元素内部的子元素排版，不会造成因为旋转宽高定义混乱、对外布局不好把握等现象。不过ie6不支持tb-lr的writing-mode值，而只支持tb-rl和lr-tb，这就像古人的竖写方式从上往下和从右往左。 ie6 ie7 ie8对writing-mode的支持情况： http://msdn.microsoft.com/en-us/library/ms531187.aspx 各个值的具体表征： 总结如下：

/*writing-mode: lr-tb;*/ /*ie6 ie7 ie8*/ /*writing-mode: tb-rl;*/ /*ie6 ie7 ie8*/ /*writing-mode: rl-tb;*/ /*ie7 ie8*/ /*writing-mode: bt-rl;*/ /*ie7 ie8*/ /*writing-mode: tb-lr;*/ /*ie8*/ /*writing-mode: bt-lr;*/ /*ie8*/ /*writing-mode: lr-bt;*/ /*ie8*/ /*writing-mode: rl-bt;*/ /*ie8*/

为解决这个问题，这里使用ie的翻转滤镜来解决，父元素翻转一次，子元素也得再翻转回来，而翻转之后的宽高和对外布局不影响。 以下使用了inline-block的display值，ie6和7使用*display:inline; *zoom:1;触发hasLayout来模拟实现。 代码如下(ie下浏览)：

1

2

3

4

5

6

7

8

9

10

11

12

转载于:https://www.cnblogs.com/defims/archive/2011/06/20/2946701.html