更新:在小提琴上添加 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");
});