CSS 兼容IE和火狐的文字竖排_Div+Css_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

CSS 兼容IE和火狐的文字竖排

来源：未知作者：类型：图文教程点击次数：发布时间：2014-04-03 10:37:56

一、writing-mode文字竖排（不兼容火狐）
首先请运行下面的代码查看效果(请在火狐和IE下都运行下)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS 兼容IE和火狐的文字竖排</title> </head> <body> <p style="writing-mode:tb-rl; height:100px; border:1px solid red; text-indent:2em;"> 鲁镇的酒店的格局，是和别处不同的：都是当街一个曲尺形的大柜台，柜里面预备着热水，可以随时温酒。做工的人，傍午傍晚散了工，每每花四文铜钱，买一碗酒，——这是二十多年前的事，现在每碗要涨到十文，——靠柜外站着，热热的喝了休息；倘肯多花一文，便可以买一碟盐煮笋，或者茴香豆，做下酒物了，如果出到十几文，那就能买一样荤菜，但这些顾客，多是短衣帮，大抵没有这样阔绰。只有穿长衫的，才踱进店面隔壁的房子里，要酒要菜，慢慢地坐喝。 </p> <p style="writing-mode:lr-tb; height:40px; border:1px solid blue; text-indent:2em;"> 鲁镇的酒店的格局，是和别处不同的：都是当街一个曲尺形的大柜台，柜里面预备着热水，可以随时温酒。做工的人，傍午傍晚散了工，每每花四文铜钱，买一碗酒，——这是二十多年前的事，现在每碗要涨到十文，——靠柜外站着，热热的喝了休息；倘肯多花一文，便可以买一碟盐煮笋，或者茴香豆，做下酒物了，如果出到十几文，那就能买一样荤菜，但这些顾客，多是短衣帮，大抵没有这样阔绰。只有穿长衫的，才踱进店面隔壁的房子里，要酒要菜，慢慢地坐喝。 </p> </body> </html>
提示：您可以先修改部分代码再运行

通过试验，你会发现“writing-mode:tb-rl;”实现了段落在IE下，从右往左，从上往下的排序，但是，火狐不起作用。而“writing-mode:lr-tb;”的书写模式和正常模式一样，从左往右。
由于不兼容火狐，所以不推荐这种方法实现文字竖排。
注：上面代码的text-indent:2em 是首行缩进，2em刚好是两个汉字，四个英文字符。

二、用ul模拟文字竖排
还是在火狐和IE下运行下面的代码：

通过试验，发现这个方法，火狐和IE显示完全一样，文字竖排，并且阅读顺序从右到左。具体做法(比较繁琐)：
1)把每句话写进一个li里面，然后把li右浮动，即“float:right;”这么做是为了阅读顺序从右往左。
2)li的宽度设置成和字一样的大小，例如14px等，这样是为了让一列只显示一个字。
3)加上word-wrap:break-word;和word-break:nomal;，强制把标点符号和字母也换行。