在IE中对css生成的内容应用文本装饰 [英] Applying text-decoration on css generated content in IE

问题描述

看起来IE不关心 text-decoration：none; 为定义a：before （或伪类）。

It seems IE doesn't care for text-decoration: none; defined for a:before pseudo element (or pseudo class).

这里是一个JS小提琴： http：// jsfiddle。 net / 9N35f /

我希望>失去下划线。它在FF，Chrome和Safari，但不是在IE。测试使用IE10和IE9。

Here is a JS Fiddle: http://jsfiddle.net/9N35f/
I'd expect the ">" to lose the underline. It does in FF, Chrome and Safari, but not in IE. Tested with IE10 and IE9.

任何解决方法，我可以尝试让< c $ c>：before 元素失去下划线？理想情况下在IE9 +

Any workarounds that I could try to make the :before element lose the underline? Ideally in IE9+

这里有一个错误报告吗？

Is there a bug report for this somewhere? Or is it actually by the standards?

推荐答案

IE似乎在这里有错误，因为 display：block 应该删除下划线。根据第16.3条，在CSS 2.1规范中装饰，用户代理不得在不是文本的内容上呈现这些文本修饰。例如，图片和内嵌块不能带下划线。

IE seems to be in error here, since display: block in your code should remove the underlining. According to clause 16.3 Decoration in the CSS 2.1 spec, "User agents must not render these text decorations on content that is not text. For example, images and inline blocks must not be underlined."

在

There does not seem to a bug a report on this at the IE Feedback Home.

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

In this case, a suitable workaround might be to use an image as the generated content:

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

其中arrow.png指的是一个合适的小图标。在 content 中 url（...）的使用.w3.org / TR / css3-content /> CSS3生成和替换的内容模块，这是一个严重过时的草稿（最后一个版本是2003年），但这部分已经在浏览器中广泛实现。不是在IE 7，但是。所以，如果你想覆盖IE 7，考虑在@ EugeneXA的答案的方法，可能使用JavaScript动态生成额外的标记。

where arrow.png refers to a suitable small icon. The use of url(...) in content is described in CSS3 Generated and Replaced Content Module, which is a seriously outdated draft (the last version is from 2003), but this part has been widely implemented in browsers. Not in IE 7, however. So if you wish to cover IE 7 as well, consider the approach in @EugeneXA’s answer, possibly generating the extra markup dynamically with JavaScript.

这篇关于在IE中对css生成的内容应用文本装饰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！