Chrome绝对定位

Question

我在Chrome中遇到绝对定位问题。我已阅读所有类似的问题，并找不到适当的解决方法。

我正在建立一个使用Headway Theme for Wordpress的网站。在这个网站中，我们有一个以网格为中心的布局加上全角背景。主题只给了我一个固定的网格布局的选择，所以我必须使用jQuery的全宽背景。

有问题的网站：http://www.mochilao.syncmobile.com.br/

我做了什么：我使用jQuery追加搭配全宽的div和偏移就那么左= 0。这工作得很好，在页眉和页脚。

问题： Webkit浏览器似乎有一个绝对位置的问题。所以我必须给中间盒子一个偏移量，这样它才能正常工作。但我遇到了一个错误。无论何时您单击标题徽标以返回主页或重新加载页面全宽背景框中断。在这些情况下，似乎不需要条件偏移量。但是，我该如何解决这个问题？

jQuery的脚本：http://www.mochilao.syncmobile.com.br//wp-content/themes/headway/custom.js

Answer 1

首先想到的：

你不应该使用 “每个” 为您的函数调用：

$(".game").load(compose(".game", "yellow")); 

，因为有多个元素“游戏“类？只是一个想法。另外，将你的函数附加到元素的加载看起来像是一个潜在的问题，因为你所追求的是窗口的宽度，而不是元素的宽度。该元素将在整个窗口加载之前加载。改用window.onload来代替。 （你会得到一个没有风格的内容，但这是一个单独的问题。）

但也有其他连接问题：加载1300px宽的页面，然后将其拉伸到1500宽，你会看到在Webkit和FF10中右侧都出现类似的错误。下面还有其他奇怪的错误，也在“noticias”div上。这个问题可能是onresize事件的一个bug，jquery已经（主要）规范化了，但没有人完美。

Hombre，这是一个解决模板限制的很多工作。我认为你首先可能在错误的脚上，即使你能够得到它，它显然是依赖于js的，这是不必要的。这真的是一个CSS问题，而不是一个JS问题。即使如此，您还是在构建网站，以便它永远不会对狭窄的视口做出反应，这可能是一个糟糕的主意。

为什么不只是做一个纯粹的CSS方法？将包装设置为100％宽度，无填充。然后将您的旁边设置为100％宽度，并使用具有最大宽度的内部容器。让WP循环保持不变，只需将它们包装在设置为中心的新div中即可。然后设置

background-size:cover 

你的背景图像为每一个。它不适用于古代浏览器，但它会让你更加接近。

或...只是在身体或#whitewrap上设置疯狂的宽背景图像（足以覆盖任何实际情况）？或者，如果这太多了，不妨考虑在各个部分内部添加虚拟子div，这些部分绝对被推到每个区域之外以覆盖边距。然后将容器设置为溢出：隐藏，所以事情不会伸出。这在语义上很丑，但更直接。有一个更简单的方法来解决这个问题，而不会引入文档重排问题。你将切实写出不符合每一个浏览器CSS特征的js！