更新:在 fiddle 上添加了 css 转换以使其更清晰
当通过 javascript 从这个 div 中删除填充时,Chrome 不会调整内容的大小以适应(即,红色的 div 不会覆盖黄色,它保持相同的大小): http://jsfiddle.net/XDchs/4/
同样,如果添加了填充,内容将被推到 div 之外: http://jsfiddle.net/XDchs/3/
Firefox 会按我的预期调整大小。有谁知道为什么,以及如何解决它?
HTML:
<div id="outer">
<div id="inner">
<div id="content">blah</div>
</div>
</div>
CSS:
#outer {
background-color:blue;
width:300px;
margin:0 auto;
}
#inner {
padding-left:100px;
margin:2px;
background-color:yellow;
-webkit-transition:padding-left 2s;
-moz-transition:padding-left 2s;
}
#inner.no-padding {
padding-left:0;
}
#content {
background-color:red;
}
JavaScript:
$(document).ready(function() {
$("#inner").addClass("no-padding");
});
最佳答案
我不知道为什么 Chrome 会出现不正确的行为,但您可以通过重置宽度来解决:
#inner.no-padding {
padding-left:0;
width: 100%;
}
关于javascript - 当填充发生变化时,如何让 Chrome 调整此 div 的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14405043/