我正在使用 fontello 字体图标。除了 Internet Explorer 之外,它们都可以完美运行。它们也不会对悬停状态做出反应,所以...我现在遇到的问题是字体图标下有一条奇怪的下划线。
我已经尝试过文本装饰、边框底部......
有没有人对此有任何解决方案:
这是我的 CSS 代码,我在这个项目中使用 SASS:
nav{
a{
width: 60px;
height: $height-header-nav-tablet;
float: left;
line-height: 50px;
text-align: center;
@media screen and (min-width : $media-tablet-min) and (max-width : $media-tablet-max) {
width: $width-header-link-nav-tablet;
}
i.icon-menu{
font-size: 30px;
}
&:link,
&:visited{
color: $blue-dark-takeda;
@include border-gradient;
text-shadow: 1px 1px rgba(28, 42, 83, 0.2);
}
&:hover{
color: $white-takeda;
background-color: $blue-dark-takeda;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
}
&:active{
@include background-image(radial-gradient(45px 45px, $blue-dark-takeda 25px, #111931 40px));
}
&.active {
color: $white-takeda;
background-color: $blue-dark-takeda;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
@include background-image(radial-gradient(45px 45px, $blue-dark-takeda 25px, #111931 40px));
}
}
}
在尝试了不同的解决方案后,我找到了解决方案。奇怪的是,所有其他浏览器都不会显示这个奇怪的下划线,只有 IE。所以我申请了text-decoration: none;
to header nav a
它起作用了。我的错误是将这个文本装饰应用到图标本身。
我不明白为什么其他浏览器从未显示过这种奇怪的下划线,而 IE 却显示了这种奇怪的下划线,但至少如果其他人遇到这个问题,对我有用的解决方案是 text-decoration: none。
希望有帮助!!!
P.D.感谢dstorey的帮助
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)