html - 盒子阴影在 Chrome 上消失

Question

在 Chrome 上，如果我刷新浏览器或打开检查元素，导航栏上的框阴影就会消失，根本不显示。这不会发生在 IE 上。恢复它的唯一方法是硬刷新。有什么想法吗？

网站网址:http://tomwilson.pw/files/design/

我的 HTML 是:

<div id="nav_wrapper">
<div id="nav_content">

<div id="nav_logo"></div>

<div id="navigation">

<a href="#" class="active">Home</a>
<a href="#">Link One</a>
<a href="#">Link Two</a>
<a href="#">Link Three</a>
<a href="#" class="button">Sign In &rsaquo;</a>

</div>

</div>
</div>

<div id="feature_home"></div>

我的 CSS 是:

div#nav_wrapper{
    height: 110px;
    width: 100%;
    background: url('../img/nav_bg.png'), #293340;
    box-shadow:0 0 10px rgba(0,0,0,0.8);
    position: relative;
    z-index: 2;
    display: block;
}
div#nav_content{
    height: 110px;
    margin: auto;
}
div#feature_home{
    width: 100%;
    height: 500px;
    background: url('../img/feature_bg.png'), #55B5D4;  
    position: relative;
    z-index: 1;
    display: block;
}

Answer 1

这是我最近遇到的最奇怪的错误。

事情是，你使用多个背景，它会杀死阴影。

div#nav_wrapper{
  background: url('../img/nav_bg.png'), #293340;
  box-shadow:0 0 10px rgba(0,0,0,0.8);
}

看到 url(..) 和 #293340 之间的逗号了吗？那是两个背景。在我们的例子中没用:

div#nav_wrapper{
  background: #293340 url('../img/nav_bg.png');
  box-shadow:0 0 10px rgba(0,0,0,0.8);
}

工作正常并解决了问题。

我会调查根本原因并在发现问题时进行更新。

顺便说一句，不是前缀问题，box-shadow 在大多数浏览器中是没有前缀的:http://caniuse.com/#search=box-shadow

编辑:罪魁祸首是......你的png! http://jsfiddle.net/ZNwN7/