使用定位时文本褪色答案

【问题标题】：Text is faded when using positioning使用定位时文本褪色
【发布时间】：2013-11-15 16:31:41
【问题描述】：

更新：此问题仅在 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;
}

【问题讨论】：

标签： css text positioning

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

我已将颜色更改为#FFF，但它仍然褪色。在 safari 中，当页面加载时，文本实际上开始为白色，然后立即消失。
正如 Kierchon 所说，添加 !important。不过，现在对我来说它看起来很白。刷新页面，可能你的 CSS 被缓存了。

【解决方案3】：

它不会褪色，您只需将字体颜色设置为灰色。

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

【讨论】：

不，即使设置为白色，它仍然会褪色。我会更新网站给你看。看看大标题，也设置为白色。
@KieranVyas 然后将其更改为 color:#FFF!important;
@KieranVyas 现在在网站上看起来不错
我觉得让我眼花缭乱的事实是，当我加载页面时，它一开始是白色的，然后立即消失。这不会发生在您的浏览器上吗？我正在使用野生动物园
@KieranVyas 我正在使用 Chrome 我认为这不是一个大问题，因为这相当简单。尝试重新加载并清除缓存和所有内容。我也只是在我的 iPad 上把它拉了出来（我只有 safari），它仍然是白色的