なぜクロムdevのツールこれはあなたがSAMPLE3入力に注力したときに、ラベルのフォントを視覚的に減少<a href="https://getmdl.io/components/index.html#textfields-section" rel="nofollow noreferrer">MDL site</a>に観察することができるCSS

Question

とは異なるフォントサイズを報告します。

クロームのdevのツールは、フォントサイズ15.9213を報告ラベルのピクセルがありますが、ノードを展開すると、トップのCSSエントリはフォントサイズの12ピクセルを示唆：

との違いについての説明は何ですか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 
} 

これはフォントサイズを変更するものです。