为什么不能在具有背景的锚元素上设置行高？

Question

我只是意识到具有背景的锚标签只会继承它们的行高,你只能通过将锚设置为display来直接设置它:inline-block;

为什么是这样？

http://jsfiddle.net/moefinley/3H3y5/

ul li a {
    display: inline-block;
    line-height: 20px;
}

Answer 1

这是根本原因:

content-area =在非替换元素中,由元素中每个字符的font-size描述的框串在一起; 在替换元素中,元素的固有高度加上任何边距,边框或填充

内联框 =添加(半) - 导致每个元素的内容区域; 对于非替换元素,元素的内联框的高度将完全等于line-height的值; 对于替换元素,元素的内联框的高度将完全等于元素的内在高度加上任何边距,边框或填充

line-box =限定作为行的一部分的内联框的最高点和最低点的框

以下行为不属于此描述:

1. 内联元素的背景应用于内容区域加上任何填充
2. 替换元素上的边距和边框会影响该元素的内联框的高度,并暗示该行的线框高度

因此a,只有当您将其标记为块元素时,具有背景的行高才能正常工作inline-block.并且在默认行为下,它只会拉伸线高而不会拉伸背景.