导航栏被 Bootstrap 中的覆盖层覆盖 [仅在 safari 中]

Question

如此处所示：http://i.stack.imgur.com/HpoIc.jpg 我使用 Bootstrap 创建了一个导航栏，并为下面的 div 创建了一个颜色叠加层，但导航栏现在被覆盖层覆盖了。这只发生在 safari 中。有什么建议吗？

编辑：

HTML:

<div class="jumbotron textLeft wow fadeInLeft" id="introductionMain">
   <div class="overlay" style="height:100vh;">
      <div class="container verticalCenter" id="introductionmainContent">
        <h1>Unleash your <b>Creativity.</b></h1>
        <p>Creativity Through Arts aims to encourage <b><span class="liveType"></span>
        </b> to pursue their artistic paths.</p>
        <p><a class="btn btn-primary btn-lg" href="#performerMain" role="button">For Performers</a>
        <a class="btn btn-primary btn-lg" href="/events" role="button">For Volunteers</a>
       </p>
       <div>
     </div>
   </div>

CSS:

.overlay {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
/*background-color: rgba(255,165,0,0.7);*/
background: -webkit-linear-gradient(45deg, rgba(255,78,80,0.9), rgba(249,212,35,0.9)); /* Chrome 10+, Saf5.1+ */
background:    -moz-linear-gradient(45deg, rgba(255,78,80,0.9), rgba(249,212,35,0.9)); /* FF3.6+ */
background:     -ms-linear-gradient(45deg, rgba(255,78,80,0.9), rgba(249,212,35,0.9)); /* IE10 */
background:      -o-linear-gradient(45deg, rgba(255,78,80,0.9), rgba(249,212,35,0.9)); /* Opera 11.10+ */
background:         linear-gradient(45deg, rgba(255,78,80,0.9), rgba(249,212,35,0.9)); /* W3C */


position: relative;
z-index:9999;
color:white;}

Answer 1

1) 将 position:relative 添加到您的 #introductionMain div

2) 从您的 .overlay div

中删除 position:relative

Answer 2

从“.overlay”中删除所有样式属性class，背景和颜色除外。

.overlay {
  background: -webkit-linear-gradient(45deg, rgba(255,78,80,0.9),     rgba(249,212,35,0.9)); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(45deg, rgba(255,78,80,0.9),     rgba(249,212,35,0.9)); /* FF3.6+ */
  background:     -ms-linear-gradient(45deg, rgba(255,78,80,0.9), rgba(249,212,35,0.9)); /* IE10 */
  background:      -o-linear-gradient(45deg, rgba(255,78,80,0.9), rgba(249,212,35,0.9)); /* Opera 11.10+ */
  background:         linear-gradient(45deg, rgba(255,78,80,0.9), rgba(249,212,35,0.9)); /* W3C */
  color:white;
}

导航栏被 Bootstrap 中的覆盖层覆盖 [仅在 safari 中]

Navbar being covered by an overlay in Bootstrap [only in safari]

css

overlay

navbar

twitter-bootstrap-3