§ ITPOW >> 文档 >> CSS

指定情况下,上级的非超链接文本 line-height 会影响下级的超链接

作者:vkvi 来源:ITPOW(原创) 日期:2020-7-17
<!DOCTYPE html>

<html>

<head>
<style type="text/css">
body { line-height:25px; }
div { width:100px; height:40px; overflow:hidden; }
div a { line-height:20px; }
</style>
</head>

<body>

<div><a href="http://www.itpow.com/">欢迎您访问ITPOW,在这里您可以找到很多实践文章。</a></div>

</body>

看如上代码,div 紧接着是 a,并无空白字符,所以 a 的行高似乎应该响应 line-height:20px; 那么这段超链接行高应该是 20px,而 div 为 40px,也就是说,应该刚好能显示出 2 行来,但是效果却是:

指定情况下,上级的非超链接文本 line-height 会影响下级的超链接

 并没有显示全,说明行高是大于 20px 的,再研究发现,这里行高响应的是 body 的 line-height

这就奇怪了:为什么超链接的 line-height 不响应本级 a 的,而要响应 body 的呢?

经过测试原来是这样的:

1、指定了 <!DOCTYPE html>

2、超链接的行高,取上级 line-height超链接 line-height最大值即谁大听谁的

解决办法:

法一、可以不指定 <!DOCTYPE html>,或者换作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

法二、为 a 的上级指定 line-height 和 a 一样,比如本文就需要给 div 指定行高 20px。

本文在 Chrome 中测试,我怎么感觉这个是 BUG。

相关文章