瀏覽器兼容性問題與CSS和HTML

我有圖標到不同的網站，如果你把鼠標放在他們身上變得更小。在Firefox上，圖標變小不會對導航欄產生影響，但對所有其他瀏覽器都有影響。這是怎麼看起來像在Firefox上：瀏覽器兼容性問題與CSS和HTML

，這是它看起來像微軟邊緣，瀏覽器，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>

來源

2015-10-01 Jojo01

你能在codepen重現。它看起來像你可能需要應用一個清晰的修正。你也可以使用其他的東西，而不是在圖像上對齊。 – Underfrog

我只是想知道什麼使圖標對齊到正確的... – nowhere

更多的提示：不要使用一個圖像，而是每個圖像的id，你將能夠在一個CSS處理程序中應用代碼來管理所有其中。 – Underfrog

嘗試將clearfix後你的圖標列表：

<div style="clear:both"> 

</div>

這應該避免浮動菜單。

見琴：http://jsfiddle.net/1pm5uz28/

來源

2015-10-01 14:50:34 nowhere

這工作得很好，只有微小的向上移動時，徘徊在twitter圖標上。 – Jojo01

@ Jojo01是的，但那是因爲在小提琴中沒有圖標，只是文字可能？垂直運動是否也發生在你的頁面上，並帶有真正的圖標？ – nowhere

是的它確實.... – Jojo01

瀏覽器兼容性問題與CSS和HTML

回答

相關問題