网站图形不出现在某些浏览器中

时间:2013-11-18 16:06:54

标签: html css browser safari

我正在处理的网站似乎没有显示某些图片。例如使用IE和Firefox我的网站看起来很好,但是使用Safari我只得到蓝色背景,有问题的网站是:

http://www.huntspillfederation.co.uk/

为学校做这件事,我的网页设计技巧非常好(正如你所知道的那样!)

我猜它的CSS就是问题所在,在这种情况下,错误就在这段代码的某处:

<style type="text/css">
    #background {
        width: 100%; 
        height: 100%; 
        position: fixed; 
        left: 0px; 
        top: 0px; 
        z-index: -100; /* Ensure div tag stays behind content; -999 might work, too. */
    }
    .stretch {
        width:100%;
        height:100%;
    }
    .stretchw {
        width:100%;
    }
    #cloud1 {
        position: absolute;
        left: 50px;
        top: 50px;
        z-index:-99;
    }
    #cloud2 {
        position: absolute;
        right: 50px;
        top: 50px;
        z-index:-98;
    }
    .bottom {
    background-image: url("images/hill3.png");
    background-position: left bottom;
    background-repeat: repeat-x;
    position:absolute;
    bottom:0px;
    left:0px;
    width: 100%;
    height: 263px;
    border: none; 
    overflow-x: hidden;
    z-index:-97;
    }

    body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    color: #666;
    }
    h1 {
    color: #000;
    font-size: 35px;
    font-family:Palatino Linotype;
    font-style:italic;
    }
</style>

非常感谢任何帮助!

:)

2 个答案:

答案 0 :(得分:0)

看起来您的负z-index是导致问题的原因。从0开始,对于要在背景前显示的元素,请更高。

答案 1 :(得分:0)

  1. 您不需要在背景div中使用container_bg1.jpg图像。在您的身体标签上添加:

    background-color: #67b8ed;
    
  2. 然后删除背景div和图像。此时您不再需要它们,并且它可以减少一个div和图像,可能与页面上显示的其他内容发生冲突。

    1. 请勿对图像应用动态高度和宽度。我看到云层根据窗户的高度拉伸。

    2. 在Safari,Chrome,IE和Firefox中,图片看起来很不错。