1.6.2 谨慎使用嵌套百分比值
在嵌套使用百分比值时您得谨慎些，在上面的例子中，我们为整个页面设定了一 个关键字值 small，然后通过使用 container <div>来将这个值减小为 small 的95%。此后，当再为 #container 里面的对象设定百分比值时，有些事情可能会令人糊涂。
例如，前面我们声明了所有的<h1>对象应该被设定为 150%。但因为<h1>对象在 文档树中要低一些—— 它被包含在 #container 中，因此在页面层级中位于 #con- tainer 之下—— 所以我们真正得到的并不是初始值 small 的 150% 大小，而是 small 的95 % 大小的 150 %。关于页面文档树中对象的嵌套如何影响百分比值，可见图 1- 10 。
 |
| 图 1 - 1 0 这是当对象嵌套时，百分比如何计算的示意图 |
困惑了？如果把 small 换成一个数值可能会帮助您理解。
假设给<body>设定的文字大小基准值等于10(而不再是small)，那么#container以内的任何东西都等于 9.5(即 10 的 95%)。大标题<h1>在 #container 的里面，我们 指定了一个 150% 的 font-size 给它。我们本来的基准值 10 的 150% 是 15，但因为<h1>的父对象是 #container，所以计算过程就是 9.5 的 150% 等于 14.25。当选择嵌 套的层级越深时，百分比的计算也愈加复杂。现在抛开令人头晕的算术，我们这里想 强调的是，当声明新的百分比值时，要先看看是不是已经设定了任何父对象的百分 比。就我个人而言，我在构建页面的时候嵌套很少超过两层，但是了解了嵌套层级对 百分比值的影响，可以在面对文字大小并不是如您所想的结果时，不至于太困惑。
提示：当嵌套小于100%的百分比时的一个额外警告：一旦用户通过改变浏览器设置进一步减小文字的话，可能会导致页面文字小到难以辨认。 换句话说，如果在设计页面时考虑的是默认浏览环境，并使用了一个在浏览器默
认设置下文字非常小不过仍能看清的百分比值，那么当用户的浏览器所设置的文字大 小为比默认值小的时候，这个百分比值下的文字就可能没法看清楚了。
记住，要在各种浏览器和文字大小的场景下做测试，不管设置什么样的关键字－ 百分比组合，都要确保文字总是可读的。无论用什么方法设定文字大小，这都是一个好建议。
值得一看的是 Owen Briggs 整理的一份全面翔实的测试清单，包括了各种浏览器，系统平台以及文字大小设定方法(www.thenoodleincident .com/t utoria ls/ box_lesson /font/method.html)。Owen 做了 264 张屏幕截图来重现各种测试场景， 并列出了结果比较表(图 1-11)。
 |
|
图 1 -1 1 O wen Briggs 对文本大小的测试，包含了 2 64 张屏幕截图， 涵盖了几乎每种可能的组合，是一份很有价值的资源 |
| 回书目 上一节 下一节 |
相关文章
