Как я могу заставить IE8 принимать тег CSS: before? - PullRequest
Новая
       32

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

11 голосов
/ 30 марта 2010

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

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

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

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

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

Ответы [ 5 ]

24 голосов
/ 17 апреля 2012

На самом деле вы должны быть осторожны здесь и прочитать детали. Для получения полной информации см. эту ссылку , в которой указано

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

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

23 голосов
/ 30 марта 2010

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

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

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

10 голосов
/ 15 октября 2012

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

6 голосов
/ 30 марта 2010

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

<!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 .

0 голосов
/ 30 сентября 2013

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

На случай, если вы попадете под дождь .... 

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