前几天整理自己的一个页面，在页面某一部分发现行高一直调整不到我想达到的效果，把CSS捋了一遍，终于发现症结所在。做了个示例，如下。
假设页面代码：
<!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>
<title>test Page</title>
<style type="text/css">
#parent
{
font-size:24px;
line-height:200%;
}
#p1
{
font-size:12px;
}
#p2
{
font-size:12px;
line-height:200%;
}
</style>
</head>
<body>
<div id="parent">
<p id="p1">
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
</p>
<hr />
<p id="p2">
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
</p>
</div>
</body>
</html>
按照我的理解：
既然在父元素parent中定义了 line-height:200%, 又在子元素p1中定义了 font-size:12px, 按照p1继承父元素parent行距的原则，那么，在p1中的行距应该是 12px*200%=24px.
p2中因为既定义了font-size:12px, 又定义了 ine-height:200%, 那么p2中的行距应该是：12px*200%=24px.
但是，在浏览器中却是下图中的效果：
测试结果： p1 中的行距不是我想象中的24px，而是24px*200%=48px.
我得出这样一个初步的结论：如果子元素继承百分比形式的父元素 line-height，那么这个继承来的 line-height 是基于父元素 font-size 的百分比。
那如果把 parent 中的 font-size 删除呢？那 p1 的行距是不是就会是基于 p1 本身大小的百分比了？
于是我把 parent 中的 font-size:24px 删除再测试
代码
<!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>
<title>test Page</title>
<style type="text/css">
#parent
{
line-height:200%;
}
#p1
{
font-size:12px;
}
#p2
{
font-size:12px;
line-height:200%;
}
</style>
</head>
<body>
<div id="parent">
<p id="p1">
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
</p>
<hr />
<p id="p2">
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
</p>
</div>
</body>
</html>
结果如下：
从上图的结果中可以看出：p1的行距，明显比上次的结果要小，但是还是比p2的行距要大。也就是说，现的p1的行距仍然不是24px，而是大于24px。
再从当前代码的基础上删除p2中的 font-size:12px
代码
<!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>
<title>test Page</title>
<style type="text/css">
#parent
{
line-height:200%;
}
#p1
{
font-size:12px;
}
#p2
{
line-height:200%;
}
</style>
</head>
<body>
<div id="parent">
<p id="p1">
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
</p>
<hr />
<p id="p2">
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
</p>
</div>
</body>
</html>
结果如下：
从上图中可以看出，虽然p1和p2的字体大小不一样（p1的字体大小是12px，p2的字体大小是默认大小），但他们的行距是一样高的。
也就是说p1的行距，是基于默认字体大小的200%（样式表中p1下的200%）。
终于得出这样的结论：
子元素继承在没有定义line-height 的情况下，继承父元素的 line-height，但是继承来的 line-height 如果是以百分比来表示的，那么这个百分比是基于父元素的字体大小，如果父元素中没有定义字体大小，那么 line-height 的基准会一直上溯，直到默认字体大小。
我想其它的CSS属性一定也有类似的特性，夜深了，改天再议。