似乎 IE 不关心为text-decoration: none;
伪a:before
元素(或伪类)定义。
这是一个 JS Fiddle: http: //jsfiddle.net/9N35f/
我希望“>”会丢失下划线。它在 FF、Chrome 和 Safari 中可以,但在 IE 中没有。用 IE10 和 IE9 测试。
问题:
我可以尝试使:before
元素失去下划线的任何解决方法?理想情况下在 IE9+ 中
某处是否有此错误报告?还是实际上符合标准?
似乎 IE 不关心为text-decoration: none;
伪a:before
元素(或伪类)定义。
这是一个 JS Fiddle: http: //jsfiddle.net/9N35f/
我希望“>”会丢失下划线。它在 FF、Chrome 和 Safari 中可以,但在 IE 中没有。用 IE10 和 IE9 测试。
我可以尝试使:before
元素失去下划线的任何解决方法?理想情况下在 IE9+ 中
某处是否有此错误报告?还是实际上符合标准?
我知道这是一个相当古老的线程,但是刚刚在 IE 11 中遇到了这个问题,并且找不到太多帮助,我决定进行实验。在与早期版本相比显着改进的开发工具的帮助下,我设法弄清楚了 - 无论如何我正在做的事情。有可能它也适用于其他人,尽管您可能需要进行调整。YMMV。
的HTML:
<li><a href="#">Whatever</a></li>
CSS(在@frnhr 指出我发布的初始版本实际上不起作用后编辑):
a {
display: block;
position: relative;
padding-left: 15px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:before {
position: absolute;
left: 0;
top: 0;
height: calc(100% - 2px);
overflow: hidden;
content: ">";
}
秘诀是设置高度和overflow: hidden;
线条;这意味着下划线仍然存在,但在伪元素提供的视口之外,因此永远不会在屏幕上看到。它也适用于其他浏览器(也在 Chrome 和 Firefox 上测试过)。根据您现有的样式,您可能需要调整值中的像素calc()
值。
IE 似乎在这里出错,因为display: block
在您的代码中应该删除下划线。根据 CSS 2.1 规范中的第 16.3 条装饰,“用户代理不得在非文本内容上呈现这些文本装饰。例如,图像和内嵌块不得有下划线。”</p>
IE 反馈主页上似乎没有关于此的错误报告。
在这种情况下,一个合适的解决方法可能是使用图像作为生成的内容:
a:before {
content: url(arrow.png);
}
其中 arrow.png 指的是一个合适的小图标。在CSS3 Generated and Replaced Content Module中描述了 inurl(...)
的使用,这是一个严重过时的草案(最后一个版本是从 2003 年开始的),但是这部分已经在浏览器中广泛实现。然而,在 IE 7 中却没有。因此,如果您也希望涵盖 IE 7,请考虑 @EugeneXA 的答案中的方法,可能会使用 JavaScript 动态生成额外的标记。content
如果背景是白色的,您可以使用底部边框:
a {
text-decoration: none;
border-bottom:1px solid blue;
}
a:before {
content: "> ";
border-bottom:1px solid white;
}
不确定标准怎么说,但 IE 行为似乎更合乎逻辑。将 :before 视为标签内的元素<a>
,而不是标签外的元素。Child 的 text-decoration 属性应该与它的 parent 无关。
此解决方法将起作用
<span><a href="#">a link</a></span>
a {
text-decoration: underline;
}
span:before {
content: ">";
}
另一种解决方案是设置一个小line-height
(height
也可以)并设置overflow: hidden
为使下划线消失。
我知道这不是最好的解决方案,因为 line-height 值取决于您使用的字符。在这种情况下,0.6 是一个很好的值,但对于另一个角色来说可能不是。
就我而言,这是一个很好的解决方案,因为我遇到了只有一个具有固定字体大小的特定字符的问题。
a {
text-decoration: underline;
}
a:before {
content: ">";
display: inline-block;
text-decoration: underline; /* simulate IE behavior */
line-height: 0.6; /* line-height must be smaller than font-size */
overflow: hidden;
}
这对我有用:
html:
<a href="#"><span>a link</span></a>
CSS:
a {
text-decoration: none;
}
a span {
text-decoration: underline;
}
a:before {
content: ">";
}
在这种情况下,之前的标签仍然是锚的一部分。