<body>
<div id="navigation"> ... </div>
<div id="main_content"> ... </div>
<div id="side_bar"> ... </div>
<div id="footer"> ... </div>
</body>#navigation {font-size:1em}
#main_content {font-size:1.2em}
#side_bar {font-size:1em}
#footer {font-size:0.9em}
所以这将使文档的导航条和侧边栏的文本显示为10px，主要内容是 12px 以及脚注为 9px。现在这儿还遗留这几个需要被列出的异常现象（即使是使用像素，你也不得不考虑这个）。在 Mozilla 系浏览器中，在我们前面所述的 #main_content 内，所有的标题元素中的 div 将显示 12px，无论他们在 H1 或者 H6 中，然而就像预料中的一样，其他的浏览器将标题显示成其他的尺寸。将 text-size 应用到所有的标题中，将带来强壮的跨浏览器性，比如：
H1 {font-size:2em} /* displayed at 24px */
H2 {font-size:1.5em} /* displayed at 18px */
H3 {font-size:1.25em} /* displayed at 15px */
H4 {font-size:1em} /* displayed at 12px */在表单和表格中一个类似的工作还要去做，强制表单控件和单元格继承正确的尺寸（主要是为了 IE/Win）:
INPUT, SELECT, TH, TD {font-size:1em}因此最终 tweak and the bit folks （译者：不知道怎么翻译，估计是钻研这方的爱好者，类似于极客 Geek）似乎发现了戈多的小窍门：处理嵌套元素。我们已经在标题元素上于这方面有所涉及，但是从现在开始，让我们更仔细的的看看实际上发生了什么。首先我们将我们的 BODY 的文本尺寸改为10px； 相当于默认大小的 62.6%
16 x 0.625 = 10然后我们说我们主要的内容应该按照12px来显示。如果我们什么都不做， #main_content div （译者：id为 main_content 的 div 元素）就会显示成10px，因为它会从 body 元素继承字体大小。也就是说当我们使用 ems 的时候，我们总是将文本的尺寸同其父元素关联起来。
子元素像素值 / 父元素像素值 = 子元素 ems
12 / 10 = 1.2
下面我们希望我们的标题一为 24px。 h1 的父就是 #main_content div，我们知道它是 12px。 为了让标题为 12px，我们需要将其加倍，所以 ems 就是：
