7

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

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

问题：

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

某处是否有此错误报告？还是实际上符合标准？

4

6 回答 6

8

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

于 2015-04-14T09:41:15.797 回答
5

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

于 2013-08-06T04:28:34.900 回答
3

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

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

a:before {
    content: "> ";
    border-bottom:1px solid white;
}
于 2013-08-05T23:39:09.127 回答
2

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

此解决方法将起作用

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

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

a {
    text-decoration: underline;
}

span:before {
    content: ">";
}
于 2013-08-05T23:22:25.897 回答
2

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

于 2015-08-26T14:14:40.030 回答
1

这对我有用：

html:

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

CSS：

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

在这种情况下，之前的标签仍然是锚的一部分。

于 2013-10-19T10:17:01.573 回答