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

Question

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

Chrome开发工具报告标签的字体大小为15.9213px，但是当您展开节点时，顶部css条目建议使用font-size 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
}

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