Может ли свойство контента CSS работать в IE7?

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. Также можно использовать обычные html-сущности и html-шестнадцатеричные сущности; кажется, что они необходимы для некоторых персонажей, например косая черта, /

Благодарность за шрифт, потрясающая для этого решения: http://fortawesome.github.com/Font-Awesome/. Я не уверен, разработали ли они технику, но это то, где я впервые увидел ее.

Чтобы ориентироваться только на IE7, я использовал технику Пола Айриша для условных комментариев 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

Если ваш контент не предназначен для изменения во время выполнения, вы можете использовать следующее:

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

Если ваш контент предназначен для изменения во время выполнения, вы можете сделать что-то вроде этого:

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

К сожалению, это очень медленно.Хотя он, вероятно, будет работать в IE6 со значительным снижением производительности, IE7, вероятно, завершится сбоем, если на вашей странице слишком много значков.Поэтому я бы не рекомендовал этот второй метод, если только вы не используете очень мало значков и можете позволить себе снижение производительности.

Answer 4

Вы можете использовать выражение 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');}​