为什么有些CSS规则仅适用于Chrome？

Question

请转到Chrome中的this page，然后查看Aktualności部分和文字：

  

Tupacsum Ipsum她几乎献出了生命......

然后在Firefox和Opera上查看相同的URL。接下来尝试向我解释为什么这条规则：font: 12px normal 'Lato', 'Times New Roman';不能同时处理（FF，Opera）和Chrome。

我在某处犯了错误吗？或者我是否使用仅适用于Chrome的内容？

<小时/>

铬：

火狐：

Answer 1

为什么不将其从body #main.home > .bottom .right .top article更改为.desc p

.desc p {
    font-size: 12px;
    font-family: 'Lato', 'Times New Roman';
    line-height: normal;
}

在使用LESS时嵌套规则时要小心，你绝不应该真正嵌套超过3级。想一想如何首先编写实际的选择器，然后嵌套所需的东西。

Answer 2

浏览器只是被通用字体属性的值搞糊涂了。您需要指定更多值，以便了解应用内容的位置。

这很好用：

body #main.home > .bottom .right .top article {
    font: normal 12px/normal 'Lato', 'Times New Roman';
}

来自@ ferne97的解决方案虽然可能是更好的做法，但不能用作特定的选择器，只能使用font-family明确设置而不是使用相同的通用字体属性。如果您使用带有原始字体属性值的简化选择器，问题仍然存在。