Html IE无法对固定宽度的文本输入应用填充

我有以下非常基本的html：

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

其中一条规则在页面加载后立即应用，使用jQuery：

$(function () {

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

});

请在此处查看奇怪的IE行为：

这发生在IE10（无法应用水平填充）、IE9和IE8（它们无法同时应用水平和垂直填充）中

有趣的是，只有在不同的css类中指定了宽度和填充，并且加载页面后应用了其中一个类时，才会出现此问题

---

除了将类应用于服务器端的包装器div或在一个类中同时指定填充和宽度之外，您是否找到了解决此问题的方法？

不确定为什么会发生这种情况，但解决方法与框大小有关。我没有理由，但如果你注释掉该属性，它就可以正常工作。当框大小为内容框（默认值）或填充框时，IE 10中的代码可以正常工作。另一个解决方法（尽管我更喜欢Pete的方法）是获取输入字段的值，并在应用类后立即将其设置回字段。

填充框

不适用于所有浏览器（请参阅），因此最好避免使用它。对于输入，

border box

的兼容性问题最少。谢谢各位，我想我还是要接受内容框的大小调整。