html - 使用图像链接时标题导航栏消失

Question

基本上，导航栏工作得很好，当用户滚动时，它会静态地粘在屏幕顶部。当它是纯文本时，一切正常。当我想添加 Twitter 和 Facebook 图标时，我可以简单地这样做，它就会起作用。但是，一旦我添加 <a href="#">包围图像，它完全打破。有时，即使有图像链接，导航栏也能正常工作，但大约 90% 的时间它会失败，导航栏不会出现，即使 Inspect Element 显示它应该被加载，也没有显示任何内容。

相关:

工作 HTML

<div class="" id="header">
    <ul class="menu">
        <li class="menu-item first"><a href="gallery.mywebsite.ca">Gallery</a></li>
        <li class="menu-item second"><a href="charity.mywebsite.ca">Charity</a></li>        
        <li class="menu-item third"><a href="about.mywebsite.ca">About Me</a></li>
        <li class="menu-item fourth"><a href="contact.mywebsite.ca">Contact</a></li>
        <li class="menu-item media"><img src="TaiwanSite_files/twitter.png" height="25">
        &emsp;
        <img src="TaiwanSite_files/fb.png" height="25"></li>

        <li class="menu-top">
            <a href="#intro"><img src="TaiwanSite_files/top-arrow.svg" height="61" width="61"></a>
        </li>

    </ul>
</div>

损坏的 HTML

<div class="" id="header">
    <ul class="menu">
        <li class="menu-item first"><a href="gallery.mywebsite.ca">Gallery</a></li>
        <li class="menu-item second"><a href="charity.mywebsite.ca">Charity</a></li>        
        <li class="menu-item third"><a href="about.mywebsite.ca">About Me</a></li>
        <li class="menu-item fourth"><a href="contact.mywebsite.ca">Contact</a></li>
        <li class="menu-item media"><a href="https://twitter.com/#"><img src="TaiwanSite_files/twitter.png" height="25"></a>
        &emsp;
        <a href="https://facebook.com/#"><img src="TaiwanSite_files/fb.png" height="25"></a></li>

        <li class="menu-top">
            <a href="#intro"><img src="TaiwanSite_files/top-arrow.svg" height="61" width="61"></a>
        </li>

    </ul>
</div>

相关的CSS:

.menu {
padding:0;margin:0 auto;position:relative;max-width:1024px;height:2.4em;padding-left:62px;padding-right:62px
}
.menu:after {
display:block;content:"";clear:both
}
.menu-logo {
position:absolute;top:.18em;left:0;right:0;text-align:center;z-index:-1
}
.menu-logo img {
width:4.8em;margin:0;padding:0
}
.menu-item {
display:block;float:left;min-width:20%;text-align:right;height:1.2em;margin-top:.58em
}
.menu-item.first {
text-align:left
}
.menu-item.second {
text-align:left
}
.menu-item.third {
text-align:left
}
.menu-item.fourth {
text-align:left
}
.menu-item.media {
float:right;text-align:right
}
.menu-item a {
text-decoration:inherit;font-family:inherit;color:inherit;font-weight:inherit;line-height:inherit;display:none
}

如果此时我可以提供任何其他信息，请通知我，我会尽力提供。非常感谢您的时间和帮助。

Answer 1

将特殊类添加到您的 a 标签(在本例中为 on):

<a class="on" href="https://twitter.com/">
<img src="TaiwanSite_files/twitter.png" height="25"></a>

<a class="on" href="https://facebook.com/">
<img src="TaiwanSite_files/fb.png" height="25"></a>

然后将其添加到您的样式中:

.on {
    display: inline-block !important;
}

为了让图片并排显示，或者这样:

.on {
    display: block !important;
}

为了使图像成为一个在另一个之上。

这应该有所帮助。