css - CSS 内容属性可以在 IE7 中工作吗？

Question

我遇到了 CSS content 属性，它能够将文本添加到元素中。

例如：

.class:after{
   content: "testing";
}

不幸的是，这个 CSS 属性只在 IE8 中工作，只有 !DOCTYPE 被定义。

无论如何或解决方法，我们可以让它在 IE7 中工作吗？不使用 JavaScript 或 jQuery。

Answer 1

我正在使用这个不需要js的解决方案。

.whatever {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'my content');
}

不要添加伪元素，:before 或 :after。也可以使用常规的 html 实体和 html 十六进制实体；某些字符似乎需要它们，例如正斜杠，/

归功于此解决方案的字体真棒：http: //fortawesome.github.com/Font-Awesome/。我不确定他们是否开发了这项技术，但这是我第一次看到它的地方。

为了仅针对 IE7，我使用了 Paul Irish 的条件 IE 注释技术：http: //paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

所以它变成：

.lt-ie8 .whatever {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'my content');
}

Answer 2

不行，IE7不支持

唯一的机会是使用 Javascript/Jquery。

Answer 3

您可以使用 CSS 表达式在目标元素之后添加一个元素，然后使用另一个 CSS 表达式向新元素添加内容，如下所示：

.class {zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i")).className="ie-after" );}

.class .ie-after {zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = 'testing');}​

Answer 4

如果您的内容不打算在运行时更改，您可以使用以下内容：

.icon-glass {
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}

如果您的内容打算在运行时更改，您可以执行以下操作：

.icon-glass {
  *top:expression(0, this.innerHTML = '');
}

不幸的是，这非常慢。虽然它可能在 IE6 中工作，但会显着降低性能，但如果页面上有太多图标，IE7 可能会崩溃。所以我不会推荐第二种技术，除非你只使用很少的图标并且你可以承受性能下降。