在Chrome上消失的箱子陰影

在Chrome瀏覽器中，如果我刷新瀏覽器或打開檢查元素，導航欄上的箱子陰影消失並且不顯示。這在IE上不會發生。讓它恢復的唯一方法是硬刷新。有任何想法嗎？在Chrome上消失的箱子陰影

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

來源

2013-11-02 Tom Wilson

這是最奇怪的錯誤，我在一段時間遇到。

事情是，你使用多個背景，它會殺死陰影。

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

編輯：而罪魁禍首就是......你的PNG！ http://jsfiddle.net/ZNwN7/

來源

2013-11-02 14:41:03 mddw

剛剛發現了這一點。這是問題，而不是前綴問題。 –

它也吸引了我，在我所有的時間裏，我從來沒有遇到過奇怪的事情。我會刪除額外的背景;它不應該在那裏：P –

它的工作 - 謝謝！ :) –

嘗試用相同的內容添加-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); 
    ... 
}

來源

2013-11-02 14:32:16 Joren

我刪除了-webkit-和-moz-，因爲他們根本不需要，也沒有什麼區別:) –

這裏是我做的：

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-02 14:50:13

在Chrome上消失的箱子陰影

回答

相關問題