CSS 内容属性可以在 IE7 中使用吗？

发布于 2024-12-01 07:40:48 字数 219 浏览 1 评论 0原文

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

例如：

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

不幸的是，这个CSS属性只能在IE8中使用！DOCTYPE被定义。

有没有办法或者解决方法可以让它在 IE7 中也能工作？不使用 JavaScript 或 jQuery。

原文

I came across with CSS content property, which it is able to add text into element.

for example:

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

Unfortunately this CSS property only working in IE8 only with !DOCTYPE is defined.

Is there anyway or workaround that we can make this to be working in IE7 too? without using JavaScript or jQuery.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

意中人 2024-12-08 07:40:48

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

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

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

此解决方案归功于 font Awesome： 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');
}

I'm using this solution, which doesn't require js.

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

Don't add a pseudo element, :before or :after. Also regular html entities can be used and html hex entities; they seem to be required for some characters, e.g. forward slash, /

Credit to font awesome for this solution: http://fortawesome.github.com/Font-Awesome/. I'm not sure if they developed the technique, but it's where I first saw it.

To target IE7 only I used Paul Irish's technique for conditional IE comments: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

So it becomes:

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

回复收藏 0 原文

我不咬妳我踢妳 2024-12-08 07:40:48

不，IE7 不支持

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

回复收藏 0 原文

陪你到最终 2024-12-08 07:40:48

您可以使用 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');}

You can use a CSS expression to add an element after your targeted element, and then use another CSS expression to add content to the new element, like this:

.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');}

回复收藏 0 原文

余罪 2024-12-08 07:40:48

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

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

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

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

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

If your content is not intented to change at runtime, you could use the following :

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

If your content is intended to change at runtime, you could do something like this :

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

Unfortunately, this is extremely slow. While it is likely to work in IE6 with a significant reduction of your performance, IE7 is likely to crash if you have too many icons on your page. So I wouldn't recommend this second technique unless you use only very few icons and you can afford the performance reduction.

回复收藏 0 原文

~没有更多了~