css - フォントのパーセンテージを逆にする方法

Question

フォント サイズのパーセンテージの増加を元に戻すにはどうすればよいですか。フォント サイズが 125% 増加した場合、それを反転するには 80% のフォント サイズが必要になると考えていたでしょう (100/125 = 0.8)

ただし、この例では、結果のフォント em サイズを使用して幅を作成していますが、機能しません。なぜ？

フィドル。

html :

<div id="base">
    <div id="row1">
        <input type="text" />
    </div>
    <div id="row2">
        <input type="text" />
    </div>    
</div>

css:

#row2 {
    font-size: 125%;
}

#row2 input {
    font-size: 80%;
}

input {
    background-color: #343434;
    width: 10em;
}

Answer 1

これは実際には意図したとおりに機能してい#row2ます。デフォルトでは のフォント サイズが 16 ピクセルですが、<input>の場合は 13 ピクセルしかありません。16px の 125% は 20px です。でルールを指定すると、#row2 input実際には<input>、その計算のために親のフォント サイズが に継承されます。20 の 80% は 16 であるため、大きく表示されます。デフォルトでは、入力のフォント サイズは継承されません。font-sizeその入力からルールを完全に削除するだけで、これを修正できます。

http://jsfiddle.net/RgQeE/6/

Answer 2

通常、あなたは正しいでしょう、を使用font-size:80%すると逆になりfont-size:125%ます。ただし、inputタグはfont-sizeほとんどの要素のように継承するようにデフォルト設定されていないため、親から継承しません。font-size を「逆」にして通常のサイズに戻すには、単純に に設定しないでくださいfont-size:80%。

うまくいけば、この例はそれがどのように機能するかを示しています:

jsフィドル

HTML

test
<div id="base">
    <div id="row1">
       test <input type="text" value="test" />
    </div>
    <div id="row2">
        test<input type="text" value="test" />
    </div>    
</div>

CSS

#row2 {
    font-size: 125%;
}
#row2 input:first-child {
    font-size: 80%;
}    
.eighty-percent {
    font-size:80%;
}
input {
    width: 10em;
}