0

我有一个神秘的（至少对我而言）css 背景图片问题，我只在 Google Chrome 中遇到过。我发现了类似的主题，但与那些不同的是，这里不涉及 Javascript、JQuery 或其他任何内容，它是纯 CSS。它只是没有按应有的方式工作。

如果您打开页面 www.bodrogietterem.hu，背景图像应该位于整个内容区域的下方（就像在其他浏览器中一样）。在 Chrome 中会出现一个水平和垂直的白色区域。

一旦你开始滚动，背景图像就会显示一切正常，并且从那时起它就一直存在。同样，当您使用检查元素打开开发工具时，背景图像会立即出现，并且也会保留在那里。

这是相关的CSS：

body.page-node-1  div#main{
background:#FFFFFF url('/sites/all/themes/bodrogietterem/images/bodrogi_bodrogi.jpg') bottom;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50% 135px;
padding-bottom:0px;
margin-bottom:0px;
}

并附上两个关于它的外观和外观的屏幕截图（好吧，作为新用户，我不允许附加这些，但请看这里：

http://www.bodrogietterem.hu/chrome_issue.JPG

和这里

http://www.bodrogietterem.hu/should_look_like.JPG

它也发生在子页面上，但我认为问题的根源必须相同。

我正在使用 Vista、最新的 Chrome (20.0.1132.57) 和最新的其他浏览器。顺便说一句，第二张截图也是在 Chrome 中拍摄的，但是在打开开发工具之后

非常感谢您的帮助，最好的，Zsolt

4

4 回答 4

0

感谢您的帮助，我终于设法解决了这个问题。

在摆弄的同时，我测量了白色区域的高度，结果是 135px（这正是上面 CSS 中背景的顶部位置）。所以我决定无论出于何种原因，该属性导致了问题，我是对的。

作为一个快速而肮脏的解决方案，我在背景图像的顶部添加了 135px 的白色区域，并将 background-position 属性的顶部设置为 0px - 这立即解决了问题。

至于垂直白色区域，它是通过将背景图像绑定到#main-wrapper div而不是#main div（它是Drupal 7构建）来解决的。同样，我不完全知道为什么，但它立即解决了问题。

我喜欢，网络应该如何精确和合乎逻辑，并且有时它仍然保持随机和临时性

再次感谢您的时间和精力，最好的，Zsolt

于 2012-07-27T23:01:01.307 回答
0

Chrome 的最新版本是 21.0...所以尝试更新 chrome 浏览器，看看它在最新版本中是否正常。屏幕截图会导致 404 错误页面，因此请尝试再次上传屏幕截图。

我还检查了 IE7、IE8、IE9 中的页面，页面在所有 3 中看起来都不错，但 IE7 在底部显示了一个水平滚动条，但背景图像看起来还不错。

于 2012-07-27T07:54:50.400 回答
0

您的页面在 Windows 7 中的 Chrome 中看起来不错（Chrome 20.0.1132.57）

过去我遇到过一些问题，即已安装的各种工具栏/插件会干扰页面上的 CSS，从而显着导致 Chrome 在孤立事件中出现故障。尝试在未安装插件/插件的情况下运行 chrome，看看它是否能解决您的问题。

对 CSS 的一项观察：#content包含未清除的浮动元素。我不认为这是这里的问题，但可能与上述问题混合在一起。

让我知道这是否有帮助。

于 2012-07-27T19:50:48.800 回答
0

http://www.stoerbeton.nl的两页也有同样的问题，但我想我在阅读了你的上述帖子和一些想法后解决了这个问题。

问题可能出在一般背景中： url; 网站css的属性和加载。我替换了所有一般背景：#222222 url repeat 等；对于背景图像：；，背景重复：；和背景颜色：；等等

请让我知道您的网站在编辑您的 CSS 后是否可以正常工作。我还在测试。

问候，aquaster.nl

于 2013-05-02T15:17:56.393 回答