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默认情况下字体大小为 16px，但对于<input>它只有 13px。16px 的 125% 是 20px。当您在其中指定规则时，#row2 input实际上会导致该<input>计算继承其父级的字体大小。20 的 80% 是 16，所以看起来更大。默认情况下不继承输入的字体大小。您只需font-size从该输入中完全删除规则即可解决此问题。

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

Answer 2

通常你会是正确的，使用font-size:80%将 reverse 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;
}