Question

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

我的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);
}

工作正常并解决问题。

如果我找到了什么，我会调查根本原因并进行更新。

BTW，不是前缀问题，在大多数浏览器中都没有框阴影：http://caniuse.com/#search=box-shadow

编辑：罪魁祸首是......你的朋友！ http://jsfiddle.net/ZNwN7/

Answer 2

尝试添加具有相同内容的-webkit-box-shadow属性，因为Chrome（也是Safari）是一个webkit浏览器。为了更好地衡量，还要使用-moz-box-shadow来确保Mozilla也正确地呈现它：

div#nav_wrapper{
    ...
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.8);
    ...
}

相关：What is WebKit and how is it related to CSS?

Answer 3

这就是我所做的：

div#nav_wrapper {
height: 110px;
width: 100%;
background: url('../img/nav_bg.png');
box-shadow: 0 0 10px rgba(0,0,0,0.8);
position: relative;
z-index: 2;
display: block;
}

问题是什么背景属性。享受！

Box Shadow在Chrome上消失了

3 个答案: