Question

我有以下非常基本的html：

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

我有一些css规则将 width 和 padding 应用于 #username 输入。

* {
    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;
}

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

$(function () {

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

});

请在此处查看奇怪的IE行为：http://jsfiddle.net/pkawiak/MqAEE/

这种情况发生在IE10（无法应用水平填充），IE9和IE8（它们无法同时应用水平和垂直填充）。

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

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

IE无法在具有固定宽度的文本输入上应用填充

0 个答案: