在IE中的css生成内容上应用文本修饰

Question

看来IE不关心text-decoration: none;的定义a:before伪元素(或伪类).

这是一个JS小提琴:http://jsfiddle.net/9N35f/
我希望">"失去下划线.它适用于FF,Chrome和Safari,但不适用于IE.用IE10和IE9测试.

问题:

我可以尝试使:before元素失去下划线的任何变通方法？理想情况下在IE9 +中

这个地方有错误报告吗？或者它是否符合标准？

Answer 1

我知道这是一个相当老的线程,但在IE 11中刚刚遇到这个问题,并且无法找到太多帮助,我决定进行实验.通过显着改进的开发工具比早期版本更好,我设法弄明白 - 无论如何我正在努力.虽然你可能需要调整,但它也可能对其他人有效.因人而异.

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()值.

请参阅http://jsbin.com/biwomewebo/1/edit?html,css,output

Answer 2

IE似乎在这里出错,因为display: block在你的代码中应该删除下划线.根据CSS 2.1规范中的第16.3节" 装饰 ","用户代理不得在非文本内容上呈现这些文本装饰.例如,图像和内联块不得加下划线."

在IE反馈主页上似乎没有关于此报告的错误.

在这种情况下,合适的解决方法可能是使用图像作为生成的内容:

a:before {
    content: url(arrow.png);
}

其中arrow.png指的是一个合适的小图标.采用url(...)在content中描述CSS3生成和更换的内容模块,这是一个严重过时草案(最后一个版本是2003年),但是这部分已经在浏览器中被广泛应用.但是,不是在IE 7中.因此,如果您希望涵盖IE 7,请考虑@ EugeneXA的答案中的方法,可能使用JavaScript动态生成额外的标记.