Как я могу заставить IE8 принять CSS: перед тегом?

У меня есть следующий код CSS

.editable:before {
    content: url(../images/icons/icon1.png);
    padding-right:5px;
}

это используется в сочетании со следующей разметкой:

<span class="editable"></span>

В каждом другом благословенном браузере в мире появляется моя иконка, но у IE8, похоже, есть проблема с этим. Не является ли псевдоэлемент :before CSS2? не content: также команда CSS2? что дает?

Ответы

Ответ 1

Обновление: я неправильно читаю страницу! IE 8 поддерживает: раньше с изображениями он просто не работает, когда он находится в режиме совместимости с IE7.

IE8 поддерживает :before, ~~, но не~~, а также изображения как контент, когда он не находится в режиме совместимости. Престижность @toscho для тестирования!

Как я люблю quirksmode.org, который делает дело с этим материалом хотя бы на полпути терпимым. Парень заслуживает медали!

Ответ 2

Собственно, вы должны быть осторожны и читать детали. Полную информацию см. В этой ссылке - в которой указывается

В Windows Internet Explorer 8, а также более поздних версиях Windows Internet Explorer в стандарте IE8, только форма двоеточия этот псевдоэлемент распознается - то есть: before. Начиная с Windows Internet Explorer 9,:: перед псевдоэлементом требуется два двоеточия, хотя форма с одной толстой кишкой все еще распознается и ведет себя идентично форме двух толстой кишки.

Значение для браузеров <IE9 - вы должны использовать :before и для >=IE9 - вы должны использовать ::before

Ответ 3

При использовании: before и: after просто будьте осторожны, чтобы не использовать двойные двоеточия (:: after - не будет работать, но: после работы). Я потерял около 20 минут для этого...

Ответ 4

Вы можете использовать изображение в качестве фона для сгенерированного содержимого:

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Generated content with an image</title>
<style>
p:before
    {
        content:    '';
        padding:    20px;
        background: url("css.png") center center no-repeat;
    }
</style>
<p>Test</p>

Работает в IE 8, Opera и Mozilla. Live-Demo.

Ответ 5

Это увлекательный пример Пекки... Мои высоты в моем проекте были высокими для ряда... Поэтому я добавил нижнюю часть: 0px;

На всякий случай вы дождетесь в это....

.icon-spinner:before {
    content: '';
    padding: 15px;
    padding-bottom: 0px;
    background: url("css.png") no-repeat left top;
}