<!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 行来,但是效果却是:
并没有显示全,说明行高是大于 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。