用CSS减少行之间的空间(为什么我不能模仿这种风格？)

Question

试图复制Facebook使用的链接样式撕毁我的头发.使用firebug我抓住了facebook中链接的计算css,并将其应用到我自己的.它呈现相同的,除了,无论我尝试什么,我不能缩小像facebook那样的行之间的空格.无论我设置线高多小,线间距保持不变.我怎样才能像Facebook那样缩小我的行高,为什么我不能使用计算出的样式到达那里？

Facebook帖子链接的计算风格:

background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
color: #3B5998;
cursor: pointer;
direction: ltr;
display: inline;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
font-size: 11px;
font-weight: bold;
height: auto;
line-height: 14px;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: left;
text-decoration: none;
unicode-bidi: normal;
width: auto;

以下是应用Facebook链接计算css的小提琴:http: //jsfiddle.net/Ptcd3/10/

---

编辑:

基于ovs的例子我发现了一些甚至更奇怪的东西 - 应用于父级的行高会覆盖应用于元素本身的行高!这与级联规则和计算样式面板中显示的内容背道而驰.

请看这里: http ://jsfiddle.net/Ptcd3/23/
我在元素上应用了9px的行高,在父元素上应用了6px的行高.9px行高显示在计算样式中,应该如此,但渲染结果是6px行高.

在Firebug和Chrome的css检查器中都可以看到应用样式和计算样式之间的这种脱节.???!

Answer 1

申请display: block,它会工作正常.