本文翻译自msdn，某些示例已省去。 在 Internet Explorer 5.5 中使用垂直布局 Mark Grinols Microsoft Corporation 2000年10月 摘要： 垂直布局是 Microsoft Internet Explorer 5.5 的一种主要的新功能。本文对垂直布局的基本概念进行了探讨，帮助您避免某些常见的错误。
注意： 本文中的示例需要 Internet Explorer 5.5 或更高的版本.
什么是垂直布局？
当您浏览几乎所有的 Web 页时（如本页），段落中的文字走向都是从左向右的。文本自动换行时，新的一行位于前一行下方，从页面的左侧开始。这是非常自然的，你甚至不会注意到它。
但是对于世界上的很多地方，这却不是天经地义的。如果你曾经看到过日文或中文的书籍或杂志，那么你就知道其印刷的文字通常采取垂直布局。文字起始于每页的右上角，其走向是向下的，换行时，下一行回到页面顶部并位于前一行的左侧。例如报纸的大字标题就在每页右侧自上而下地安排；路牌、情书、以及大多数其它形式的书写文字也是按照这种方法安排的。Web 页是个例外，HTML 无法处理这种布局。但是，这并没有阻止 Web 作者进行从位图到非常窄的表单元格的各种尝试。然而到目前为止，仍然没有找到能够实现垂直布局的令人满意的方法。 支持MSN空间联盟－我是技术总监^_^ Writing-mode 的属性
在 Microsoft® Internet Explorer 5.5 中，通过名为 writing-mode（英文）的 CSS（英文）属性（是当前为 CSS 3（英文）推荐的）启用对垂直布局的支持。下面的示例对于英文和日文内容进行了水平布局和垂直布局的比较。请浏览示例，然后我们将对细节进行深入探讨。
在 MSDN 联机 Web 工作室文档（英文）中可找到 writing-mode 所应用的元素的列表，但却无法在列表中找到 BODY 元素（英文）。这说明 BODY 元素总采取水平布局，但它所包含的元素却可以采用垂直布局。有时很难预料这种布局规则的组合结果是什么样的，这在下面的示例中会加以说明。
<HTML> <BODY> <DIV style="writing-mode:tb-rl; width:50cm"> This is a sentence in a DIV element with vertical layout. </DIV> </BODY> <HTML>
当您在 Internet Explorer 5.5 中查看此标记时，一开始看不到文字，但却会看到水平滚动条。如果您将该页一直滚动到右端，则可以看到文字。为什么会这样呢？
BODY 元素总采用水平布局，而浏览器总是将可视区定位于起始于标记中最顶端元素的原点。在前面的示例中，原点位于页面的左上角，若要显示加载了文字的页面，必须使主体滚动到右端。其实现方法为：在全局 DIV 元素（英文）中，将主体上的方向属性设置为 RTL（从右向左），然后再将方向属性设置回 LTR（从左向右）。这样，就将原点放置在右上角了。
<HTML> <BODY style="direction:rtl"> <DIV style="direction:ltr; writing-mode:tb-rl; width:50cm"> This is a vertical sentence. </DIV> </BODY> </HTML>
将垂直元素与水平父元素的行为一同考虑时，元素高度将变得错综复杂（请记住，因为 BODY 元素总是水平的，所以这种情况是常见的）。水平父元素的高度是可变的，— 根据父元素的内容，这个高度有时很小，有时很大。根据父元素的高度来决定子元素的高度并不是一个好的解决方案，应当通过计算来决定最合适的高度。这种计算建立在变量数目的基础之上，包括字符大小（以第一个为基准）和文章中最长的单词。通常，垂直子元素的最小高度是 10 个字符高度。
当然，通过在标记中指定高度、宽度和位置，你可以降低绝大部分的复杂程度，并更好地控制布局。
平台限制
操作系统的限制导致在某些配置中不能正确地按竖直方向显示东亚字符。Microsoft Windows® 2000 中消除了这一限制，但对于 Microsoft Windows NT® 4.0 和 Windows 9x 系统，对东亚语言仍需要已经本地化的操作系统版本，以确保可以正确显示这些字符。
摘要
在 Internet Explorer 5.5 中实现垂直布局是推广万维网 ( World Wide Web) 并使之更为人所用之路上的一个重要里程碑。垂直布局为东亚语言内容的 Web 设计者提供了一种全新的版面表现形式，它是对传统出版格式的更好的效仿，或者它也可以表示为引入了一个全新的外观。与其它任何事物一样，学习垂直布局的最佳方法就是实践。一旦您掌握了它的用法，就开始应用它吧。
Der eingegebene Kommentar ist zu lang. Bitte kürzen Sie ihn.
Sie haben keine Angabe gemacht. Bitte versuchen Sie es erneut.
Ihr Kommentar kann im Moment leider nicht hinzugefügt werden. Bitte versuchen Sie es später erneut.
Zum Hinzufügen eines Kommentars ist die Erlaubnis von einem Elternteil erforderlich. Erlaubnis einholen
Der Elternteil hat die Kommentarfunktion deaktiviert.
Ihr Kommentar kann im Moment leider nicht gelöscht werden. Bitte versuchen Sie es später erneut.
Sie haben die maximale Anzahl an Kommentaren, die pro Tag zugelassen sind, überschritten. Versuchen Sie es in 24 Stunden erneut.
Kommentare wurden in Ihrem Konto deaktiviert, da in unseren Systemen angegeben wird, dass Sie anderen Benutzern möglicherweise unerwünschte E-Mails versenden. Wenn Sie der Meinung sind, dass es sich beim Deaktivieren Ihres Kontos um einen Fehler handelt, wenden Sie sich an Windows Live Support.
Schließen Sie die Sicherheitsüberprüfung unten ab, damit Sie ein Kommentar hinterlassen können.
Die bei der Sicherheitsüberprüfung eingegebenen Zeichen müssen den Zeichen im Bild oder in der Audiodatei entsprechen.
Melden Sie sich zum Hinzufügen eines Kommentars mit Ihrer Windows Live ID an (wenn Sie Hotmail, Messenger oder Xbox LIVE verwenden, besitzen Sie eine Windows Live ID). Anmelden
Sie haben noch keine Windows Live ID? Registrieren
Extras 
Hilfe
