上述代码中,p 是 body 的子元素,那么 p 元素的行高是多少?40*150%?错,应该是 20*150%,即 30px。p 中行高小于字体大小,所以文字会出现残缺。再看代码:
p 的缩进是多少?10*2?错,应该是 20*2,即 40px。需要说明的是在 IE6 中,p 的缩进是 10*2,当然这是不规范的,在 Firefox、Chrome 中是 20*2。
所以对于这种先计算后继承的值,干脆一并在子元素中指明,既避免受父级影响,又避免不兼容,比如在 p 中指明 line-height、text-indent。
相关阅读