javascript - 当填充发生变化时，如何让 Chrome 调整此 div 的大小？

Question

更新:在 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");
});

Answer 1

我不知道为什么 Chrome 会出现不正确的行为，但您可以通过重置宽度来解决:

#inner.no-padding {
    padding-left:0;
    width: 100%;
}