1

更新: フィドルに 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");
});
4

2 に答える 2

1

CSSクラスを追加した後、javascriptを介してコンテンツの幅を100％に設定することで、これを修正しました：http://jsfiddle.net/XDchs/6/

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

完全に機能する CSS ソリューションが見つかりませんでした。

また、これを Chrome のバグとして提出しました: https://code.google.com/p/chromium/issues/detail?id=171060

于 2013-01-21T16:51:51.430 に答える
1

Chrome が正しく動作しないように見える理由はわかりませんが、幅をリセットすることで回避できます。

#inner.no-padding {
    padding-left:0;
    width: 100%;
}
于 2013-01-18T18:30:25.290 に答える