1

我有以下非常基本的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;
}

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

$(function () {

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

});

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

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

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

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

4

0 回答 0