jquery - Chrome 绝对定位

Question

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

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

相关网站:http://www.mochilao.syncmobile.com.br/

我所做的:我使用 jQuery 附加全 Angular div 并将其偏移到左 = 0。这在页眉和页脚上效果很好。

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

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

Answer 1

第一个想法:

你不应该为你的函数调用使用“.each”吗:

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

因为“游戏”类有多个元素？只是一个想法。此外，将您的函数附加到元素的加载似乎是一个潜在的问题，因为您需要的是 window 的宽度，而不是元素的宽度。该元素将在整个窗口加载之前加载。改用 window.onload 试试。 (您会看到一些无样式的内容，但这是一个单独的问题。)

但还有其他相关问题:以 1300 像素宽加载页面，然后将其扩展到 1500 像素，您会在 Webkit 和 FF10 的右侧看到类似的错误。下面还有其他奇怪的错误，也在“noticias”div 上。这个问题可能是 onresize 事件的错误，jquery 已经(大部分)规范化了它，但没有人是完美的。

老兄，要绕过模板限制需要做很多工作。我认为你首先可以说是错误的，即使你能让它工作，它显然依赖于 js，这是不必要的。这确实是一个 CSS 问题，而不是 js 问题。即便如此，您构建的网站也永远不会响应狭窄的视口(viewport)，这可以说是个坏主意。

为什么不采用纯 CSS 方法呢？将包装器设置为 100% 宽度，没有填充。然后将你的旁白也设置为 100% 宽度，并使用一些具有最大宽度的内部容器。保持 WP 循环不变，只需将它们包装在设置为中心的新 div 中。然后设置

background-size:cover

在你的背景图片上。它不适用于古老的浏览器，但它会让您更接近。

或者...只是在 body 或#whitewrap 上设置疯狂的宽背景图像(大到足以覆盖任何现实情况)？或者，如果这太多而无法考虑，只需在各个部分内添加虚拟子 div，将其绝对推到每个区域之外以覆盖边距。然后将容器设置为溢出:隐藏，这样事情就不会突出来。它在语义上很丑陋，但更直接。有一种更简单的方法可以通过不引入文档回流问题的 css 来解决这个问题。实际上，您永远不会编写符合每个浏览器 css 特性的 js!