§ ITPOW >> 文档 >> CSS

请注意 CSS 先计算后继承的情况

作者:vkvi 来源:ITPOW(原创) 日期:2009-8-31
body
{
    line-height:150%;
    font-size:20px;
}
p
{
    font-size:40px;
}

上述代码中,p 是 body 的子元素,那么 p 元素的行高是多少?40*150%?错,应该是 20*150%,即 30px。p 中行高小于字体大小,所以文字会出现残缺。再看代码:

body
{
    font-size:20px;
    text-indent:2em;
}
p
{
    font-size:10px;
}

p 的缩进是多少?10*2?错,应该是 20*2,即 40px。需要说明的是在 IE6 中,p 的缩进是 10*2,当然这是不规范的,在 Firefox、Chrome 中是 20*2。

所以对于这种先计算后继承的值,干脆一并在子元素中指明,既避免受父级影响,又避免不兼容,比如在 p 中指明 line-height、text-indent。

相关阅读

相关文章