У меня есть следующий код CSSКак я могу заставить IE8 принять CSS: перед тегом?
.editable:before {
content: url(../images/icons/icon1.png);
padding-right:5px;
}
это используется в сочетании со следующей разметкой:
<span class="editable"></span>
В любом другом благословенном в мире браузере мой значок появляется, но IE8, кажется, проблема с этим. Разве это не псевдоэлемент CSS2 :before? не content: также команда CSS2? что дает?
Обновление: я неверно прочитал страницу! IE 8 делает Поддержка: раньше с изображениями он просто не работает, когда он находится в режиме совместимости с IE7.
IE8 поддерживает :before,
, но не
, а также изображения в качестве содержимого, когда он не в режиме совместимости. Престижность @toscho для тестирования!
Как я люблю quirksmode.org, что делает дело с этим материалом, по крайней мере на полпути терпимой. Парень заслуживает медали!
Вы можете использовать изображение в качестве фона для генерируемого содержимого:
<!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.
вы правы! IE8, поскольку IE8 поддерживает изображения как контент. Привет, обновил мой ответ. +1. –
На самом деле вы должны быть здесь осторожны и прочитать детали. Для более подробной информации см this link - в котором говорится
В Windows Internet Explorer 8, а также более поздние версии Windows, Internet Explorer в режиме стандартов IE8, только форма одной толстой кишки этот псевдо-элемент распознается То есть: раньше. Начиная с Windows Internet Explorer 9, перед :: псевдоэлементом :: before требуется два двоеточия , хотя форма с одним двоеточием все еще распознается и ведет идентично форме с двумя двоеточиями.
Значение для браузеров <IE9 - вы должны использовать :before и >=IE9 - вы должны использовать ::before
видя, что это спасло мне кучу времени, IE8 не работал на меня, потому что у меня был :: –
двойной двоеточие было моей проблемой, спасибо за головы. Как сделать эту передовую совместимую? То есть использовать одиночный двоеточие, если он меньше, чем IEX против двойного двоеточия, если он больше, чем IEY? – Jacques
@Jacques единственный двоеточие будет работать так же хорошо в IE> = 9. Поэтому пока просто придерживайтесь единственного двоеточия (который является стандартом CSS2.1). Только CSS3 различает одиночные и двойные двоеточия для псевдоселекторов и псевдоэлементов. –
При использовании: до и: после того, как, только будьте осторожны, чтобы не использовать двойные двоеточия (:: после - не будет работа, но: после работа). Я потерял около 20 минут для этого ...
Спасибо, это на самом деле ответ, который я лично искал. IE8 теперь работает для меня. (Stupid IE8!) – philtune
Вы, сэр, спасли меня от потенциально дневного отладочного сеанса, почему этот & $ (* # не работал, в то время как каждая таблица совместимости говорит, что он должен. –
, но лучше использовать :: before для современных браузеров конечно, если вы можете удвоить, как закрыть: до, закрыть :: before {и т.д ... – landed
Это потрясающий пример Pekka ... Мои высоты в моем проекте были высокими для строки ... Поэтому я добавил нижнюю часть: 0px;
На всякий случай вы попадаете в это ....
.icon-spinner:before {
content: '';
padding: 15px;
padding-bottom: 0px;
background: url("css.png") no-repeat left top;
}
Я не знаю об IE8, но: до и: после не поддерживается в IE7 и ниже. Не знаю, добавили ли они, наконец, поддержку в 8 или нет. Если они действительно удостоверились, что страница не является рендерингом в эмуляции IE7. – prodigitalson