使用定位时文本会消失

Question

更新：此问题仅发生在Mac计算机上的safari中。

左：safari右：谷歌浏览器

我有一个标题位于幻灯片放映的顶部，任何文字都是褪色的。页面加载时，它从白色开始，然后立即淡出。我已将网站临时放在actorscms.co.uk 您可以看到右上角的电子邮件和电话号码已淡出。放置在幻灯片放映（而不仅仅是顶部区域）上任何位置的文本都会变淡。

HTML

<div id="bannerbox">
<div id="banner">
//slideshow//
</div>
</div>


<div id="headerbox">
<div id="header">
<div id="social">
<img src="../images/fb thumb.png" width="28" height="28" alt="Facebook" />
<img src="../images/twitter thumb.png" width="28" height="28" alt="Twitter" /><br />
Email: <a href="mailto:info@blubuddha.co.uk ">info@blubuddha.co.uk </a><br />
    Phone: xxxxxxxxxxx
</div>
<div id="navigation">
    <ul id="nav">
        <li><a class="home" href="index.html"></a></li>
<li><a class="services" href="services.html"></a></li>
<li><a class="prices" href="prices.html"></a></li>
<li><a class="contact" href="contacts.html"></a></li>

    </ul>
  </div>
</div>
</div> 

CSS

#bannerbox {
position:relative;
width:100%;
padding-bottom:20px;
border-top:1px solid #191919;
background-color:#000;
} 

#banner {
width:100%;
margin-left:auto;
margin-right:auto;
}

#headerbox {
width:100%;
height:120px;
position:absolute;
background-image:url(../images/black.png);
background-repeat:repeat;
z-index:1;
top:0;
}

#header {
height: 120px;
min-width: 980px;
max-width:1100px;
background-image: url(../images/header.png);
margin-left: auto;
margin-right: auto;
background-repeat: no-repeat;
font-family: 'Josefin Slab', serif;
font-size:20px;
color:#bfefff;
padding-bottom:10px;
margin-right:auto;
margin-left:auto;   
}

#social {
float:right;
text-align:right;
padding-right:10px;
padding-top:15px;
line-height:20px;
font-family: 'Josefin Slab', serif;
color:#fff;
font-size:15px;
}

#navigation
{
height:50px;
padding-top:67px;
margin-left:142px;
}

Answer 1

找到答案！此问题是由soundcloud iframe引起的。一旦我删除了一切都很好！

Answer 2

它没有褪色你只需将字体颜色设置为灰色。

#social {
    float:right;
    text-align:right;
    padding-right:10px;
    padding-top:15px;
    line-height:20px;
    font-family: 'Josefin Slab', serif;
    color:#FFF!important; CHANGE HERE TO MAKE IT WHITE
    font-size:15px;
}

Answer 3

#social的color设置为#aaa，这就是它看起来褪色的原因。将其设置为#FFF。