样式表中定义

.content_head {border:1px solid #ccc;background:red;vertical-align:middle;line-height:20px;}

如果line-height改为height就不行

解释是:

  1. http://www.w3.org/TR/CSS21/visudet.html#line-height其中有一句 The inline boxes are aligned vertically according to their 'vertical-align' property.
  2. http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align另外有一句 This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

可见vertical-align和line-height两个属性是连在一块定义的。vertical-align属性影响的垂直定位,是局限在“行”这个渲染单位里面的。所以需要先设置line-height,设定line box的高度,才能使用vertical-align。而height影响的是div这个block的高度,而不是line box。

谢谢BSD同学的解答。