爲什麼Chrome瀏覽器開發工具報告的字體大小比CSS

Question

這可以在MDL site可以觀察到，當你對樣品3輸入焦點設置不同，標籤字體視覺上降低：

Chrome瀏覽器開發工具報告字體大小15.9213 PX的標籤，但是當你展開該節點上的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 
} 

這是更改字體大小的原因。