`
deng131
  • 浏览: 675368 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

IE中css属性writing-mode使用

阅读更多
在项目中遇到这个属性的用法设置文本的垂直显示,但是只能在ie中使用,在其他浏览器中没有很好的替代方法。

语法:

writing-mode : lr-tb | tb-rl

参数:

lr-tb : 左-右,上-下
tb-rl : 上-下,右-左

说明:

设置或检索对象的内容块固有的书写方向。西方语言是左-右,上-下的书写方式。但亚洲语言常有上-下,右-左的书写方式。

当此属性值发生变化时,text-align属性与vertical-align属性的作用也将发生变化。



示例:

div { writing-mode: tb-rl; }

参考:
http://www.yesky.com/imagesnew/software/css/css2/c_writingmode.html
http://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx?
分享到:
评论

相关推荐

    CSS的writing-mode文字排版属性使用教程

    writing-mode : lr-tb | tb-rl  CSS Code复制内容到剪贴板 /* 关键字值 */  writing-mode: horizontal-tb; /* 默认值 */  writing-mode: vertical-rl; writing-mode: vertical-lr;  CSS Code...

    css实现文字竖排效果.rar

    虽然`writing-mode`在现代浏览器中支持良好,但老版本的IE浏览器可能需要使用其专有的`-ms-writing-mode`属性。同时,对于不支持`writing-mode`的浏览器,可以采用其他方法,如使用`transform`属性旋转元素。 ```...

    CSS3实现文本垂直排列的方法

    writing-mode最初时ie中支持的一个属性,后来在CSS3中增添了这一新的属性,所以在ie中和其他浏览器中的语法会有区别。 1.0 CSS3标准 writing-mode:horizontal-tb;//默认:水平方向,从上到下 writing-mode:vertical...

    javascript经典特效---文字直接竖排.rar

    `writing-mode` 和 `transform` 在现代浏览器中支持良好,但老版本的IE可能需要使用特定的非标准属性(如 `-ms-writing-mode`)或JavaScript库(如jQuery)来实现兼容。 五、示例代码 在压缩包中的 "文字直接竖排....

    div+css实现类似winxp桌面图标布局(至上而下从左往右)

    然而,由于要兼容IE8,代码中使用了`writing-mode`属性来实现竖直排列,以及`*display:inline` 和 `*white-space:nowrap` 这样的IE8 hack。 1. `column-count` 属性:这个属性用于设置容器内的列数。例如,`.parent...

    Vertical Text with CSS(用CSS竖向排列文本)

    此外,对于不支持CSS3 `transform`属性的老版Internet Explorer,我们可以使用`writing-mode`属性或者`filter`滤镜。`writing-mode`属性可以改变文本的书写方向,`tb-rl`表示从上到下,从右到左的排列方式。`filter`...

    css 3.0 和 css 2.0中文版

    CSS 3.0盒模型引入了新的`box-sizing`属性,允许开发者选择使用W3C标准盒模型(content + padding + border = width/height)或IE盒模型(width/height = content)。这解决了CSS 2.0中盒模型解释不一致的问题。 **...

    CSS高级应用技巧.pdf

    虽然文档主要集中在处理旧版IE浏览器的问题上,但是也提到了一些CSS3的特性,比如`writing-mode`, `display: inline-block`, `zoom`属性等。这些内容可能在讲解如何向后兼容的同时,也提到了如何在现代浏览器中使用...

    hasLayout引发的CSS Bug表

    在IE6、IE7、IE8等版本的IE浏览器中,某些特定的CSS属性值会触发hasLayout,使元素拥有独立的布局能力。这些属性包括但不限于以下几点: 1. display: inline-block 2. height: 除了auto之外任何值 3. width: 除了...

    H5面试汇总(含答案)最新版(1).docx

    - `writing-mode: tb-rl` - `zoom: any_value except normal` 此外,IE7及更高版本还有其他属性可以触发hasLayout,如设置`min-height`, `max-height`, `min-width`, `max-width`, `overflow`等。 五、图像格式的...

    详解IE浏览器的haslayout属性及相关兼容性问题解决

    7. `writing-mode`从`tb-rl`设为`lr-tb`。 对于`display`属性,当`inline-block`激活了haslayout后,即使通过其他规则将其设置为`block`或`inline`,haslayout状态仍然保持,除非明确地使用上述方法重置。 总之,...

    CSS实现HTML元素透明的方法小结

    - 设置`writing-mode:tb-rl`的元素。 - contentEditable属性值为true的元素。 - 在IE8标准模式下,设置`display:block`的元素。 为了兼容所有浏览器,通常推荐使用如下方式设置透明度: ```css {-ms-filter: ...

    在IE6,7中遇到未知的问题无法解决时可以尝试触发其layout

    5. `writing-mode`: `tb-rl`。 6. `overflow`: `hidden`, `scroll`或`auto`。 7. `min-width`和`min-height`: 任何非`none`的值。 8. `max-width`和`max-height`: 非`none`的值。 hasLayout问题可能导致一些特定的...

    面试整理(含答案)最新版.docx

    6. `writing-mode: tb-rl`(垂直文本布局) 7. `zoom: (除normal外的任意值)` 在IE7及更高版本中,还有其他属性可以触发haslayout,如min-height、max-height、min-width、max-width、overflow等。 五、图像格式的...

Global site tag (gtag.js) - Google Analytics