Question

我正在编写我的第一个网页，虽然我对我到目前为止的内容感到满意，但我的网站在Safari中表现得很奇怪。 AFAIK Safari和Chrome都使用webkit引擎，但Chrome以我想要的方式呈现所有内容。 Safari没有。

在我的页面底部，我有一个固定的渐变div（#gradient_transition_bottom），可以在滚动时使文本平滑淡出。下面的div是#footer div，标志着我的网页结束。现在，当我访问Safari中的网页并滚动到底部时，页脚会被渐变覆盖。当我在该位置重新加载页面（一直滚动到底部）时，页脚出现并覆盖渐变的底部（这应该是什么样的）。

这是两张图片，以便您理解我的意思：

最初加载页面后。怎么不应该： http://i.stack.imgur.com/lTVte.png

重新加载后一直滚动到底部。它应该如何以及所有其他浏览器（包括chrome）如何呈现网页： http://i.stack.imgur.com/iIMmN.png

以下是相关的HTML：

 <foot>
        <div id="gradient_transition_bottom"></div>    
        <div id="footer">&nbsp;&nbsp;&nbsp;Lorem ipsum dolor. &copy; 2014</div>
 </foot>

和CSS：

#gradient_transition_bottom {
    background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 75%,rgba(255,255,255,0) 100%);
    bottom: 0px;
    height: 122px;
    left: 0;
    margin: 0 auto;
    position: fixed; 
    right: 0;
    width: 80%;
    z-index: 1;
}

#footer {
    background-color: #ccc;
    bottom: 0;
    clear:both;
    color: #666;
    font: 100 0.8em "Avenir Next", Raleway, Verdana, Tahoma, sans-serif;
    left: 0;
    position: absolute;
        right: 0;
    text-align: left;
        z-index: 2;
}

我有什么办法可以解决这个问题吗？谢谢你的帮助！

Safari渲染bug / z-index问题

0 个答案: