Question

我遇到了CSS内容属性，它可以将文本添加到元素中。

例如：

.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。也可以使用regular html entities和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 does not support it

唯一可能是使用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 = '&#xf000;');
}

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

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

不幸的是，这非常慢。虽然它可能会在IE6中显着降低您的性能，但如果您的页面上有太多图标，IE7可能会崩溃。所以除非你只使用很少的图标，否则你不会推荐第二种技术，你可以负担得起性能降低。

CSS Content Property可以在IE7中运行吗？

4 个答案: