html - IE が固定幅のテキスト入力にパディングを適用できない

Question

私は次のような、かなり基本的な html を持っています。

<div id="wrapper">
    <input id="username" value="CLICK ME TO SEE THE DIFFERENCE" type="text" />
</div>

#username入力に幅とパディングを適用する CSS ルールがいくつかあります。

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
input[type='text'] {
    width: 300px;
}
.applied-in-runtime input[type='text'] {
    padding: 10px 10px 10px 10px;
}

そのルールの 1 つは、jQuery を使用して、ページが読み込まれた直後に適用されます。

$(function () {

    jQuery("#wrapper").addClass("applied-in-runtime");

});

ここで奇妙な IE の動作を確認してください: http://jsfiddle.net/pkawiak/MqAEE/

これは、IE10 (水平方向のパディングの適用に失敗する)、IE9 および IE8 (水平方向と垂直方向の両方のパディングの適用に失敗する) で発生します。

興味深いことに、この不具合は、幅とパディングが異なる css クラスで指定され、ページがロードされた後にそれらのクラスの 1 つが適用される場合にのみ発生します。

サーバー側でクラスをラッパー div に適用するか、1 つのクラスでパディングと幅の両方を指定する以外に、この問題を修正する方法はありますか?