Question

如果您将鼠标放在上面，我会将不同网站的图标变小。在Firefox上，图标变小对导航栏没有影响，但对其他所有浏览器都有影响。这就是它在Firefox上的样子：

这就是它在Microsoft Edge，Chrome，Internet Explorer和Opera上的样子：

码（CSS）：

/* Navbar Section */
#navbar {
    height: 40px;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 0px #000000;
    width: 100%;
}
#navbar ul {
    list-style-type: none;
    text-align: center;
}
#navbar ul li {
    display: inline;
    line-height: 40px;
    margin-left: 5px;
    margin-right: 5px;
}
/* End Of Navbar Section */
/* Website Icons Section */
#youtube {
    margin-top: 120px;
    transition: height 0.5s, width 0.5s;
    -moz-transition: height 0.5s, width 0.5s;
    -webkit-transition: height 0.5s, width 0.5s;
    -o-transition: height 0.5s, width 0.5s;
}
#youtube:hover {
    width: 40px;
    height: 29px;
}
#twitch {
    margin-top: 113px;
    transition: height 0.5s, width 0.5s;
    -moz-transition: height 0.5s, width 0.5s;
    -webkit-transition: height 0.5s, width 0.5s;
    -o-transition: height 0.5s, width 0.5s;
}
#twitch:hover {
    width: 40px;
    height: 41px;
}
#facebook {
    margin-top: 116px;
    transition: height 0.5s, width 0.5s;
    -moz-transition: height 0.5s, width 0.5s;
    -webkit-transition: height 0.5s, width 0.5s;
    -o-transition: height 0.5s, width 0.5s;
}
#facebook:hover {
    width: 30px;
    height: 30px;
}
#twitter {
    margin-top: 116px;
    transition: height 0.5s, width 0.5s;
    -moz-transition: height 0.5s, width 0.5s;
    -webkit-transition: height 0.5s, width 0.5s;
    -o-transition: height 0.5s, width 0.5s;
}
#twitter:hover {
    width: 40px;
    height: 40px;
}
#googlePlus {
    margin-top: 117px;
    transition: height 0.5s, width 0.5s;
    -moz-transition: height 0.5s, width 0.5s;
    -webkit-transition: height 0.5s, width 0.5s;
    -o-transition: height 0.5s, width 0.5s;
}
#googlePlus:hover {
    width: 30px;
    height: 30px;
}
#patreon {
    margin-top: 118px;
    margin-right: 8px;
    transition: height 0.5s, width 0.5s;
    -moz-transition: height 0.5s, width 0.5s;
    -webkit-transition: height 0.5s, width 0.5s;
    -o-transition: height 0.5s, width 0.5s;
}
#patreon:hover {
    width: 30px;
    height: 30px;
}
/* End Of Website Icons Section */
/* Link Section */
.nFx {
    text-decoration: none;
}
/* End Of Link Section */

代码（HTML）：

<a class="nFx" href="https://www.youtube.com/user/" alt="Watch my videos" target="new">
<img id="youtube" align="right" src="images/YouTube-Icon.png" width="50" height="36" alt="Watch my videos"/>
</a>
<a class="nFx" href="http://www.twitch.tv/" alt="Watch my streams" target="new">
<img id="twitch" align="right" src="images/Twitch-Icon.png" width="50" height="51" alt="Watch my streams"/>
</a>
<a class="nFx" href="https://www.facebook.com/" alt="Follow me on Facebook" target="new">
<img id="facebook" align="right" src="images/Facebook-Icon.png" width="40" height="40" alt="Follow me on Facebook"/>
</a>
<a class="nFx" href="https://twitter.com/" alt="Follow me on Twitter" target="new">
<img id="twitter" align="right" src="images/Twitter-Icon.png" width="50" height="50" alt="Follow me on Twitter"/>
</a>
<a class="nFx" href="https://plus.google.com/" alt="Follow me on Google+" target="new">
<img id="googlePlus" align="right" src="images/GooglePlus-Icon.png" width="40" height="40" alt="Follow me on Google+"/>
</a>
<a class="nFx" href="https://www.patreon.com/" alt="Support me on Patreon" target="new">
<img id="patreon" align="right" src="images/Patreon-Icon.png" width="40" height="40" alt="Support me on Patreon"/>
</a>
<div id="navbar">
<ul>
<li><a class="activeNavA" href="#">Active Navbar Element</a></li>
<li><a class="navA" href="#">Navbar Element</a></li>
<li><a class="navA" href="#">Navbar Element</a></li>
<li><a class="navA" href="#">Navbar Element</a></li>
</ul>
</div>

Answer 1

尝试在图标列表后面添加一个clearfix：

<div style="clear:both">

</div>

这应避免浮动菜单。

请参阅小提琴：http://jsfiddle.net/1pm5uz28/

与css和html的浏览器兼容性问题

1 个答案: