浏览器兼容性问题与CSS和HTML

Question

我有图标到不同的网站，如果你把鼠标放在他们身上变得更小。在Firefox上，图标变小不会对导航栏产生影响，但对所有其他浏览器都有影响。 这是怎么看起来像在Firefox上：

，这是它看起来像微软边缘，浏览器，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/