IE 创建 font-icon 奇怪的下划线
Posted
技术标签:
【中文标题】IE 创建 font-icon 奇怪的下划线【英文标题】:IE creates font-icon strange underline 【发布时间】:2013-04-28 01:55:37 【问题描述】:我正在使用 fontello 字体图标。除了 Internet Explorer 外,它们都能完美运行。他们也不会对悬停状态做出反应,所以......我现在遇到的问题是字体图标下的trange下划线。
我已经尝试过文字装饰、边框底部...
有没有人可以解决这个问题:
这是我的 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));
【问题讨论】:
您可以发布您的代码的链接吗?如果不看到其他 css 与之交互,很难知道 @dsrotey 在这里哟去我所有的 CSS 代码。我正在使用SASS。如果有任何问题请告诉我,我非常开放!!!目前这都是本地的。 你能把它放在诸如codepen.io之类的东西中(它允许SASS),这样我们就可以看到它运行了吗? 我尝试通过 codeopen.io 输入示例,但无法插入 fontello 图标字体。这必须通过@font-face 插入。所以它需要在内部结构中找到一些文件。所以......我不能让它工作。还有其他建议吗? 【参考方案1】:在尝试了不同的解决方案后,我找到了解决方案。奇怪的是,其余的浏览器都没有显示这个奇怪的下划线,只有 IE。所以我将text-decoration: none;
应用到header nav a
并且它起作用了。我的错误是将此文本装饰应用于图标本身。
我不明白为什么其他浏览器从来没有显示过这个奇怪的下划线,而 IE 有,但至少如果其他人有这个问题,对我有用的解决方案是 text-decoration: none。
希望能帮到你!!!
P.D.感谢dstorey的帮助
【讨论】:
我很高兴这对你有用,但我不认为它是一个真正的解决方案 - 通常,链接需要下划线而不是图标。以上是关于IE 创建 font-icon 奇怪的下划线的主要内容,如果未能解决你的问题,请参考以下文章