好惨啊，九点多了没事做还不能下班，坑爹的测试啊~~~
刚才拿这个问题调戏了下部门一位资深前端开发，结果发现，他居然不会，呵呵~~~
这里就说下吧
html:
1 <div class="parent parent1"> 2 父文字 line-height:150% 3 <p class="child">子文字</p> 4 </div> 5 <div class="parent parent2"> 6 父文字 line-height:150em 7 <p class="child">子文字</p> 8 </div> 9 <div class="parent parent3"> 10 父文字 line-height:1.5 11 <p class="child">子文字</p> 12 </div>
css:
1 .parent{width: 800px;margin:20px auto;font-size: 18px;} 2 .parent1{line-height: 150%;} 3 .parent2{line-height: 1.5em;} 4 .parent3{line-height: 1.5;} 5 .child{ 6 background: #f60;color:#fff;font-size: 40px; 7 }
令人期待的效果来了
第一个和第二个的子文字显示很不完整，子元素继承父元素的line-height（150%*18px=27px）
第三个才是我们需要的显示效果，子元素继承父元素的line-height（1.5*40px=30px）
结论：父元素line-height在150%和1.5em时候，子元素会继承父元素line-height大小值，在1.5时候，子元素会继承父元素line-height倍数
快十点了，好像快可以下班了，呵呵，废话比较多，只要记住那段红色的文字就好了