html - CSS:字体语句导致行高不起作用

Question

我无法理解 CSS 中的一件事。

据我所知，line-height 通常用作中间垂直对齐的 hack。 在一种情况下它不起作用，只有在彻底的实验之后我才找到原因，这对我来说是相当难以理解和烦人的。

那么问题是什么？

看这个例子:http://jsfiddle.net/ejRA3/

#outer, #outer-bug {
    height: 35px;
    line-height: 35px;
    border: 1px solid black;
}

#outer-bug {
    font: bold 15px Arial;
}

#outer {
    font-weight: bold;
    font-size: 15px;
    font-family: Arial;
}

两个 div 具有完全相同的 CSS 属性，它们仅在一件事上有所不同。一个在 font 语句中具有字体属性，而第二个具有三个 font-... 语句。

然而，在带有字体声明的那个中，文本神奇地不在中间。

那么有人可以向我指出原因吗，为什么字体有这种奇怪的效果？或者它只是错误(不太可能发生在所有 3 种主要浏览器中:Chrome、Firefox、Opera)？

感谢所有好的解释或至少是尝试。

Answer 1

这不是错误，这是您声明简写语法重置 line-height

的方式

#outer-bug {
    font: bold 15px/32px Arial;
               /* ---^--- line-height */
}

Demo

这里有一个方便的图表供引用

^{Credits for the chart}

---

line-height 是一个可选参数...使用 Firebug，您可以确定您的 line-height 被覆盖了，因为 #outer-bug block 写在 #outer, #outer-bug 之后。

交换它们也能解决问题

Demo (交换属性阻止声明)