跨浏览器的元素的竖直排列
之前在CSS汉字竖写(column)里谈过使用css3的多栏布局实现文字竖写,而对于ie而言,其本身支持了不少文字排版的属性,比如writing-mode、direction、layout-flow等,可以实现文字的竖排,再结合inline-block我们也可以实现块级元素的竖排。
首先先实现跨浏览器的元素竖排:
方案:
总结如下:
结合现代浏览器的column支持,得到跨浏览器的元素竖排:
测试通过:ie6|ie7|ie8|chrome 12.0|safari 5.05|firefox 4|opera 11.11
出现问题:webkit对cwebkit对margin的跨栏解析错误问题,第二栏的margin-top没有表现出来,但如果将高度设为恰好的高度,则会表现正常.
webkit-对父元素的auto宽高计算比较不正常,使用固定宽高能表现正常。
代码:
当然最为折腾的跨浏览器竖排方法是使用元素的垂直旋转,不过值得注意的是,旋转只是表征,在占位布局时,仍然是未旋转之前的。
在多次ie6 ie7应用过程中,发现使用两次翻转滤镜的效率抵得惊人,所以实际使用不建议使用两次翻转滤镜,而应使用此方案:
发现expression对于html中的元素能勾比较完美地展现,但对于javascrip动态生成的元素,仍然有不少的问题:
- firefox chrome safari使用 column实现;
- ie6 ie7 ie8 使用writing-mode以及其私有的滤镜实现;
CSS 兼容性和 Internet Explorer -ms-writing-mode Attribute | writingMode Property 蓝色理想关于文字竖排的讨论 The CSS Corner: writing-modewriting-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](http://blog.idea5.org/wp-content/uploads/2011/06/writing-mode.gif)
![writing-mode](http://blog.idea5.org/wp-content/uploads/2011/06/writing-mode.gif)
/*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
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
ie8使用其支持的writing-mode: tb-lr; ie6 ie7使用其支持的expression,主流浏览器使用column。这里我使用了expression来设置负margin-right,使水平方向缩进,然后使用相对定位来将缩进的元素下移,达到竖直排列的效果,代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
- 因为未元素未生成无法赋予css expression,但如果使用了javascript来生成内容,那用javascript来修正是再好不过的了,将css代码新建一个css类,在动态生成元素后加一个回调函数为元素赋予此类,让浏览器重新渲染一下动态生成的类荣~
- 还有问题就是滤镜的使用会占用元素宽,比如用滤镜来模拟css3的投影,会影响到元素的宽,expression里还没有写修正代码~
- 而ie8使用了writing-mode后似乎设定的letter-spacing值失效了