网站图形未出现在某些浏览器中答案

【问题标题】：Website graphics not appearing in certain browsers网站图形未出现在某些浏览器中
【发布时间】：2013-12-01 20:51:22
【问题描述】：

我正在处理的网站似乎没有显示某些图形。例如使用 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>

非常感谢任何帮助！

【问题讨论】：

您是否尝试过修改 CSS 以确定可能的原因？
我可以在 PC 上的 Safari 5.1.7 中看到山丘。不过，云层正在拉长。这将是云图像样式属性中的百分比。
看起来 Safari 读取固定位置 z-indecies 的方式与绝对值不同。您的固定位置背景出现在所有绝对元素之上。
将来，您还应该将代码放在小提琴或其他网站中。这样，当您更改网站上的代码时，相关代码可以保留给可能遇到相同问题的其他人！

标签： html css browser safari

【解决方案1】：

看起来您的负 z-index 是问题的原因。从 0 开始，然后再往上增加您想要出现在背景前面的元素。

【讨论】：

【解决方案2】：

您不需要在背景 div 中使用 container_bg1.jpg 图像。在您的身体标签中，添加：
```
background-color: #67b8ed;
```

然后删除背景 div 和图像。那时您不再需要它们，而且它减少了一个 div 和图像，可能与页面上显示的所有其他内容发生冲突。

不要对图像应用动态高度和宽度。我看到云层根据窗口的高度伸展。
图像在 Safari、Chrome、IE 和 Firefox 中对我来说很好。

【讨论】：