Chrome 和 Safari 上的自定义背景图像的 Blogger 问题答案

【问题标题】：Blogger issue with custom background images on Chrome and SafariChrome 和 Safari 上的自定义背景图像的 Blogger 问题
【发布时间】：2010-05-27 08:16:12
【问题描述】：

这很奇怪，有问题的网站是blog.andrebatista.info，它是在 blogger.com 上托管的。我正在尝试使博客模板看起来与我的主网站 www.andrebatista.info 中的相同。

由于某种原因，如果我直接访问博客地址，Chrome 和 Safari 无法显示我所有的背景图片......所有这些。

但是，如果我先去www.andrebatista.info，然后再去博客它呈现就好了？¿

我自定义它的方式是在博客模板的 head 标记的最后添加一个指向我的主站点样式表的链接。该样式表如下所示：

*{ 边距：0；填充：0；边界：0； }

html,body {
 background:#064169 url(http://www.andrebatista.info/images/main_gradient_slice.jpg) repeat-x;
 font-family: Arial, "MS Trebuchet", sans-serif;
 font-size:18px;
}

#main_wrapper{
 margin: 0 auto;
 width:1024px;
}
 #header{
  background: url(http://www.andrebatista.info/images/header.jpg);
  height:133px;
  border:none;
  margin:0;
 }

 #menu_wrapper{
  background: url(http://www.andrebatista.info/images/menu.jpg);
  height:34px;
  overflow:hidden;

 }
  #menu_wrapper .menu_item{
   color:white;
   float: left;
   border: 1 px solid red;
   height: 34px;
   padding-top:10px; 
   text-align:center;
   width:100px;

  }

  #menu_wrapper .first{
   padding-left:240px;
   float:left;
   width:100px;

  }
  #menu_wrapper .active,#menu_wrapper .menu_item:hover{
   background-color:white;
   color:Teal;
   cursor: pointer;
  }

 #content_area_wrapper{
  background: url(http://www.andrebatista.info/images/body_bg_slice.jpg) repeat-y;
 }
  #content_area{
   min-height:524px;
   background: url(http://www.andrebatista.info/images/main_content_top.jpg) repeat-x;
  }
   #main_banner{
    background: url(http://www.andrebatista.info/images/main_banner.jpg) no-repeat center center;
    width:662px;
    height:338px;
    margin: 0 auto;

   }
   #main_banner div{
    color:white;
    padding-left:47px;
    padding-right:164px;
    padding-top:105px;
   }
   #text_area{
    overflow:hidden;
    width:662px;
    margin:0 auto;
    padding:14px;
   }
    #contentList{
     padding:0 20px 20px 20px;
    }
    #text_area .left{
     width:50%;
     float:left;
    }
    #text_area .left{
     width:50%;
     float:right;    
    }

 #footer2{
  background: url(http://www.andrebatista.info/images/footer.jpg);
  height:62px;
 }

 #footer{
  background: url(http://www.andrebatista.info/images/footer.jpg);
  height:62px;
 }

关于我可能缺少什么的任何想法？

【问题讨论】：

标签： css safari google-chrome blogger

【解决方案1】：

这不是 CSS 或托管您博客的服务器的问题，而是托管您网站的服务器的问题。当我使用Fiddler 检查流量时，我得到的是这些响应，而不是图像：

HTTP/1.1 302 Found
Date: Fri, 05 Mar 2010 23:43:52 GMT
Server: Apache
Location: http://www.hosting.zymic.com/403
Content-Length: 216
Content-Type: text/html; charset=iso-8859-1
Via: 1.1 www.andrebatista.info
Connection: close

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>302 Found</title>
</head><body>
<h1>Found</h1>
<p>The document has moved <a href="http://www.hosting.zymic.com/403">here</a>.</p>
</body></html>

我猜这是基于Referer标头的某种反盗链措施的结果。

【讨论】：

好吧...我想知道 zymic 是不是故意做那种事情，以便他们可以从我这里得到一些钱...有解决办法吗？我会尝试将图像托管在其他地方...谢谢！！
@hdx 我认为没有办法解决它：zymic.com/forum/index.php?showtopic=13288。至于 Firefox，在这种情况下，它们默认不发送 Referer 标头：kb.mozillazine.org/Network.http.sendRefererHeader
你塔人！我将所有图像移至 imageboo，使用 imageboo 的直接链接为博客创建了不同的样式表，现在生活很美好！我的电脑正要学习如何飞行，但你保存了它，哈哈。另外，感谢提琴手的链接！

【解决方案2】：

好吧，当我在 Firefox 中访问时，我收到一条错误消息，提示“没有帖子符合我的查询”，这让我怀疑您的服务器是否设置不正确。

编辑：在 Chrome 中也是如此

【讨论】：

那是因为我还没有发布任何东西，我怀疑它与 css 问题有关，而且它托管在 blogger.com 上，所以我很确定它不是服务器问题。

【解决方案3】：

尝试将 URL 放在引号中。（如果这不是服务器问题，如另一个答案所示，webkit 可能会在“：//”上窒息。）

background:#064169 url("http://www.andrebatista.info/images/main_gradient_slice.jpg") repeat-x;

【讨论】：

@hdx 可能不相关，但我通过验证器运行了您的 CSS，并且 #menu_wrapper .menu_item 需要取出 1 和 px 之间的空间（1 px -> 1px）。