兼容火狐和IE的CSS竖排文字代码 - CSS笔记

一般情况下有2个办法使文字在IE中达到竖排效果。
一、用layout-flow
layout-flow（设置对象书写方向）
　语法：layout-flow:vertical-ideographic
示例：div(layout-flow:vertical-ideographic;)
二、用writing-mode和text-align
1.writing-mode（设置对象书写方向）
语法：writing-mode : lr-tb、tb-rl
参数：lr-tb：从左向右，从上往下　tb-rl：从上往下，从右向左
示例：div （writing-mode: tb-rl; ）
2.text-align（设置对象中文本的对齐方式）
语法：text-align : left、right、center、justify
参数：left：左对齐　　right：右对齐　　center：居中　　justify：两端对齐示例：div （text-align : center; ）
但是在火狐中就需要以下的代码才可以支持，具体效果预览看。把示例中（）换成{}

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><style type="text/css">
<!--
body {
    background-color: #000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    color:#fff
}
p{width:16px!important;
  width: 20px;
  height:90px!important;
  height:100px;
  padding:7px 2px 0px 5px!important;/设置FF文字在容器中的位置/
  padding:0px 5px 0px 0px;/设置IE文字在容器中的位置/
  text-align:center;/此处居中已为垂直居中了/
  letter-spacing: 2px;/字间距/
  font-size:12px;
/这段设置竖排方式开始/
  direction: rtl!important;/设置文字在FF中竖排/
  direction:inherit;
  writing-mode: tb-rl;
/这段设置竖排方式结束/}
--></style><p>文字竖排显示</p>