gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 11:19:47 27 4
gpt4 key购买 nike

我有不同站点的图标,如果您将鼠标放在它们上面,这些图标会变小。在 Firefox 上,变小的图标不会影响导航栏,但会影响所有其他浏览器。这是它在 Firefox 上的样子: Firefox

这是它在 Microsoft Edge、Chrome、Internet Explorer 和 Opera 上的样子: Other browsers

代码(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>

最佳答案

尝试在您的图标列表后放置一个 clearfix:

<div style="clear:both">

</div>

这应该避免 float 菜单。

参见 fiddle :http://jsfiddle.net/1pm5uz28/

关于html - css 和 html 的浏览器兼容性问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32890189/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com