如何反转字体百分比

Question

如何反转字体大小百分比增加。如果字体大小增加了125％，那么我认为反转它需要字体大小为80％（100/125 = 0.8）

但是在这个例子中，我使用生成的字体em大小来创建宽度，它不起作用。为什么呢？

fiddle

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的字体大小默认为16px，但对于<input>，它只有13px。 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:80%。

希望这个例子能说明它是如何工作的：

jsFiddle

<强> 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;
}