В в этой таблице совместимости MS сказано, что IE9 не поддерживает псевдоэлементы ::before и ::after, но когда я его пытаюсь кажется, что он... см. JSBin
Я что-то делаю неправильно? Я думал, что ::before и ::after будут хорошими инструментами, чтобы скрыть вещи от IE9, когда на самом деле они этого не делают.
Псевдоэлементы CSS2 :before и :after, имеющие традиционную нотацию с двумя двоеточиями, поддерживаются IE8 и более поздними версиями. Они не новы для CSS3.
Обозначение с двойной колонкой, с другой стороны, новое для CSS3. IE9 поддерживает эту новую нотацию для ::before и ::after, а также для псевдоэлементов CSS1 ::first-line и ::first-letter. Однако в будущем ни один новый псевдоэлемент не может использовать синтаксис одного двоеточия, и ожидается, что браузеры (включая IE) будут поддерживать синтаксис двойного двоеточия для всех псевдоэлементов.
Я не знаю, почему эта таблица говорит, что IE9 не поддерживает новый синтаксис псевдоэлементов, поскольку он, безусловно, соответствует документам для отдельных селекторов, связанных выше, и вашему тестовому примеру. Как и, конечно же, этот ответ.
IE 9 поддерживает обозначения ::after и ::before (с двумя двоеточиями) в "стандартном режиме". В режиме "quirks mode" это не так. Это может быть проверено, например. следующим образом:
<style>
p::after {
content: "***AFTER***";
}
</style>
<p>Hello world
Здесь правило CSS игнорируется, потому что IE 9 переходит в режим quirks. Но если вы добавите следующую строку в самом начале, IE 9 перейдет в режим стандартов, и правило CSS вступит в силу:
<!doctype html>
В IE 9, что в режиме quirks, новые функции CSS (большинство функций, которые не входят ни в CSS 2.1, ни в наследие IE) не поддерживаются. В режиме quirks IE 9 не поддерживает старые однострочные обозначения :after и :before. Он поддерживает их (но не версии с двумя двоеточиями) в режиме "IE 8", которые вы можете выбрать в инструментах разработчика (F12) вручную, в меню "Режим документа" или на уровне документа с помощью тега <meta http-equiv="X-UA-Compatible" content="IE=8">.
Как указано из http://www.w3.org/community/webed/wiki/Advanced_CSS_selectors
CSS3 псевдоэлементный двойной синтаксис двоеточияОбратите внимание, что новый CSS3 способом написания псевдоэлементов является использование двойного двоеточия, например: after {...}, чтобы отделить их от псевдоклассов. Вы можете видеть это иногда в CSS. Однако CSS3 также по-прежнему позволяет использовать одну двоеточие псевдоэлементов, для обратной совместимости, и мы бы советуем вам придерживаться этого синтаксиса.