Question

IE似乎并不关心为text-decoration: none;伪元素（或伪类）定义的a:before。

这是一个JS小提琴：http://jsfiddle.net/9N35f/
我期待“＆gt;”失去下划线。它适用于FF，Chrome和Safari，但不适用于IE。用IE10和IE9测试。

问题：

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

中

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

Answer 1

我知道这是一个相当老的线程，但在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()值中的像素值。

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

Answer 2

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

IE Feedback Home上的报告似乎没有错误。

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

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

其中arrow.png指的是一个合适的小图标。在url(...)中使用content在CSS3 Generated and Replaced Content Module中描述，这是一个严重过时的草稿（最后一个版本是2003年），但这部分已在浏览器中广泛实施。但是，不是在IE 7中。因此，如果您希望覆盖IE 7，请考虑@ EugeneXA的答案中的方法，可能会使用JavaScript动态生成额外的标记。

Answer 3

如果背景为白色，则可以使用底部边框：

a {
    text-decoration: none;
    border-bottom:1px solid blue;
}

a:before {
    content: "> ";
    border-bottom:1px solid white;
}

Answer 4

不确定标准是什么，但IE行为似乎更合乎逻辑。想一想：之前作为<{1}}标签中的元素，而不是在之外。儿童的文字装饰属性应与其父母无关。

此解决方法将起作用

http://jsfiddle.net/9N35f/4/

<a>

Answer 5

另一个解决方案是设置一个小的line-height（height也可以工作）并设置overflow: hidden，以便下划线消失。

我知道不是最佳解决方案，因为行高值取决于您使用的字符。在这种情况下，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;
}

JSFiddle Demo

Answer 6

这对我有用：

HTML：

<a href="#"><span>a link</span></a>

的CSS：

a {
  text-decoration: none;
}
a span {
  text-decoration: underline;
}
a:before {
  content: ">";
}

在此之前，before标签仍然是锚的一部分。

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

问题：

6 个答案: