当填充改变时，我如何让Chrome调整这个div的大小

Question

更新:为fiddles添加css过渡，使其更清晰

当padding从这个div通过javascript删除时，Chrome不会调整内容的大小(即，红色div不覆盖黄色，它保持相同的大小):http://jsfiddle.net/XDchs/4/

同样，如果添加了padding，内容将被推到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%;
}

Answer 2

我最终通过添加CSS类http://jsfiddle.net/XDchs/6/后通过javascript将内容的宽度设置为100%来解决这个问题

$("#content").width("100%");

我找不到一个完全有效的CSS解决方案。

另外，我将此作为Chrome bug归档:https://code.google.com/p/chromium/issues/detail?id=171060