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

我不知道为什么 Chrome 的行为似乎不正确,但您可以通过重置宽度来解决:

#inner.no-padding {
    padding-left:0;
    width: 100%;
}
于 2013-01-18T18:30:25.290 回答
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 回答