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

Question

我刚刚意识到带背景的锚标签只会继承它们的行高，你只能通过设置锚点来直接设置它：inline-block;

为什么会这样？

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

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

Answer 1

这是根本原因：

  

content-area =在非替换元素中，元素中每个字符的字体大小描述的框串在一起;在   替换元素，元素的内在高度加上任何元素   边距，边框或填充

     

内联框 =添加（half-）导致每个元素的内容区域;对于未替换的元素，内联的高度   元素的框将与行高的值完全相等;   对于替换元素，元素的内联框的高度将为   完全等于元素的内在高度加上任何   边距，边框或填充

     

line-box =限定内联框的最高点和最低点的框，该行是行的一部分

以下行为不属于此描述：

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

因此，只有当您使用a将其标记为块元素时，具有背景的inline-block的行高才能正常工作。并且使用默认行为时，它只会伸展线条高度而不会拉伸背景。