Question

我有一个神秘的（至少对我来说）css背景图片问题，我只遇到了Google Chrome。我发现了类似的主题，但不像那些，这里没有涉及Javascript，JQuery或其他任何东西，它是纯CSS。它只是不能正常工作。

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

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

这是相关的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中拍摄的，但在打开开发工具后

非常感谢你的帮助，最好成绩，泽索特

Answer 1

Chrome的最新版本为21.0 ...因此请尝试更新Chrome浏览器并查看最新版本是否正常。屏幕截图会导致404错误页面，因此请尝试重新上传屏幕截图。

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

Answer 2

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

过去我遇到过一些问题，其中安装的各种工具栏/插件会干扰页面上的CSS，这显然会导致Chrome在孤立事件中出现错误。尝试运行chrome而不安装插件/ plgins并查看它是否能解决您的问题。

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

让我知道这是否有帮助。

Answer 3

感谢您的有益想法，我终于设法解决了这个问题。

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

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

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

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

再次感谢你的时间和精力，最好的，泽索特

Answer 4

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

问题可能在于一般背景：url;网站css的属性和加载。我取代了所有的一般背景：＃222222 url repeat etc。;用于背景图像：; ，background-repeat :;和背景颜色：;等。

如果您的网站在编辑完CSS后工作，请告知我们。我还在测试。

Greets，aquaster.nl

Chrome CSS背景图片显示为白色区域

4 个答案: