1

我正在制作一个完全灵活的、基于百分比的布局。

它在左侧有一个导航栏，可以从完整模式切换到小模式 - 为了实现这一点（因为导航是绝对定位的），我在主要内容的包装 div 上添加填充，作为一种方式调整内部内容的大小。

我添加了一个快速的 jQuery 函数来执行此操作，但是当我在 Chrome 中单击它时，主要内容会脱离它的容器 - 容器不会调整回 100% 宽度。

这似乎只发生在 Chrome 中——有人知道为什么，或者我能做些什么来对付它吗？

该网站可以在这里找到：http: //dev.barringtonmedia.co.uk/test/layout.html

可以在以下图像中看到问题： Chrome - 不正确的行为 - 白色边框框已脱离红色框

Firefox - 正确的行为，没有发生突破。

用它创建了一个 jsfiddle，如果你喜欢玩的话：http: //jsfiddle.net/Dycd4/

4

2 回答 2

2

我已经多次看到这个问题了。

我在这里的回答中的修复工作：jQuery CSS rendering - works in Firefox, not in Chrome

在这里它适用于您的代码：http: //jsfiddle.net/thirtydot/Dycd4/1/

于 2012-06-18T11:22:55.597 回答
0

不是关于渲染问题背后原因的真正答案，而是一个建议：您实际上可以使用 css 媒体查询而不是 jQuery 来控制不同宽度的 css。

纯粹主义者的 W3C 链接：http: //www.w3.org/TR/css3-mediaqueries/

MDN 上的实践指南：https ://developer.mozilla.org/en/CSS/Media_queries

于 2012-06-18T11:06:11.947 回答