在 IE 中对 css 生成的内容应用文本装饰

Question

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

这是一个 JS Fiddle：http://jsfiddle.net/9N35f/
我希望“>”会失去下划线。它在 FF、Chrome 和 Safari 中可以，但在 IE 中没有。通过 IE10 和 IE9 测试。

问题：

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

在某处是否有针对此的错误报告？还是真的按照标准？

Answer 1

另一种解决方案是设置一个小的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;
}

JSFiddle Demo

Answer 2

我知道这是一个相当古老的线程，但刚刚在 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 3

这对我有用：

html:

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

css:

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

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

Answer 4

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

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

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

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

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

Answer 5

如果背景是白色的，你可以使用底部边框：

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

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

Answer 6

不确定标准是怎么说的，但 IE 的行为似乎更合乎逻辑。将 :before 视为 <a> 标记的 inside 元素，而不是它的 outside 元素。 Child 的 text-decoration 属性应该与它的 parent 无关。

此解决方法将起作用

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

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

a {
    text-decoration: underline;
}

span:before {
    content: ">";
}