4

在 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;
}
4

3 回答 3

3

这是我一段时间以来遇到的最奇怪的错误。

问题是，您使用多个背景，它会杀死阴影。

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/

于 2013-11-02T14:41:03.140 回答
1

尝试添加-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);
    ...
}

相关：什么是 WebKit，它与 CSS 有什么关系？

于 2013-11-02T14:32:16.870 回答
0

这是我所做的：

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;
}

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

于 2013-11-02T14:50:13.447 回答