Question

我有一个页面，我可以动态地将控件和内容添加到div中。稍后在进行验证时，我会解析所有控件并使用.addClass（）添加一个包含box-shadow的CSS类来更改样式。

在Chrome和Firefox中一切正常，但不是IE9（我还没有尝试过IE10 + - 目前还没有在我们的环境中使用它。）

奇怪的是，我还没能确切地指出确切的原因，而且我的环境与jsfiddle之间存在差异，我无法指出。它在jsfiddle中的行为完全相同，除非css类有另一个像border-width这样的条目。在这种情况下，盒子阴影神奇地起作用。这与我的环境不同，无论我做什么或CSS类看起来如何，盒子阴影都不会出现在IE9中的动态内容中。

我知道addClass（）有效，因为当我在IE9中通过F12检查元素时，我看到该类被附加到元素上。此外，在我的环境中，如果我添加的类具有类似边框的东西，它在IE9中工作。永远不是盒子阴影。

＆＃13;

addInput = function() {
    var myHtml = '<input type="text" style="width:100px;margin-top:5px;" class="myClass"></input><br />';
    $("#myDiv").append(myHtml);
}

styleInputs = function(style) {
    $(".myClass").addClass(style);
}

removeStyles = function() {
    $(".myClass").removeClass("myStyle1");
    $(".myClass").removeClass("myStyle2");
}

＆＃13;

.myStyle1 {
    box-shadow: 2px 2px 10px #A00;
}

.myStyle2 {
    box-shadow: 2px 2px 10px #A00;
    border-width:1px;
}

＆＃13;

<input type="button" onclick="addInput()" value="Add Input"/>
<input type="button" onclick="styleInputs('myStyle1')" value="Style Inputs 1"/>
<input type="button" onclick="styleInputs('myStyle2')" value="Style Inputs 2"/>
<input type="button" onclick="removeStyles()" value="Remove Styles"/><br />
<div id="myDiv">
</div>

＆＃13;

JS小提琴：http://jsfiddle.net/b8fL24ko/6/

关于我做错的任何想法？

Answer 1

addInput = function() {
    var myHtml = '<input type="text" style="width:100px;margin-top:5px;" class="myClass"></input><br />';
    $("#myDiv").append(myHtml);
}

styleInputs = function(style) {
    $(".myClass").addClass(style);
}

removeStyles = function() {
    $(".myClass").removeClass("myStyle1");
    $(".myClass").removeClass("myStyle2");
}

.myStyle1 {
    box-shadow: 2px 2px 10px #A00 !important;
}

.myStyle2 {
    box-shadow: 2px 2px 10px #A00 !important;
    border-width:1px;
}

<input type="button" onclick="addInput()" value="Add Input"/>
<input type="button" onclick="styleInputs('myStyle1')" value="Style Inputs 1"/>
<input type="button" onclick="styleInputs('myStyle2')" value="Style Inputs 2"/>
<input type="button" onclick="removeStyles()" value="Remove Styles"/><br />
<div id="myDiv">
</div>

jQuery：IE9没有通过addClass（）在动态生成的内容上正确显示box-shadow

1 个答案: