为什么 chrome 开发工具报告的字体大小与 css 不同

Question

这可以在MDL site 上观察到，当您将焦点设置在 sample3 输入上时，标签字体在视觉上会减小：

Chrome 开发工具报告标签的字体大小为 15.9213px，但是当您展开节点时，顶部的 css 条目建议字体大小为 12px：

15.9213 和 12px 的区别是什么解释？它是铬错误吗？在这种情况下如何找出实际的字体属性是什么？

Answer 1

当您单击输入时，您可以看到一个名为 is-focused 的类被添加到父 div 中。在 CSS 文件中，您会看到以下几行：

.mdl-textfield--floating-label.is-focused .mdl-textfield__label,.mdl-textfield--floating-label.is-dirty .mdl-textfield__label,.mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
    color: #3f51b5;
    font-size: 12px;
    top: 4px;
    visibility: visible
}

这就是改变字体大小的原因。