Семейство шрифтов в псевдоэлементе

Кажется, Internet Explorer 8,9,10 всегда использует один и тот же (системный) шрифт. На самом деле Internet Explorer вообще не заботится о font-family. Важно сочетание display:table-cell и :before или :after:

<!DOCTYPE html>
<html>
<head>
    <style>

        body > div {
            display: table;
        }

        body > div > div:before {
            font-family: monospace;
            display: table-cell;
            content: 'Not a monospace font in IE.';
        }
    </style>
</head>
<body>
    <div>
        <div>
        </div>
    </div>
</body>
</html>

Это известная ошибка? Ничего не могу найти об этом.


css internet-explorer css-tables pseudo-element
person witrin    schedule 02.08.2013    source источник
comment
См.: stackoverflow.com/questions/14698234/   -  person Wesley Murch    schedule 02.08.2013
comment
Нет, это не проблема! Когда я переключаюсь на display: inline-block;, он работает. не имеет ничего общего с monospace. Если вы хотите, поместите в него любой другой реальный шрифт.   -  person witrin    schedule 02.08.2013
comment
ваш псевдоэлемент работает в IE7?   -  person Praveen    schedule 02.08.2013
comment
Нужна ли вся эта демонстрация для воспроизведения проблемы или ее можно упростить?   -  person Wesley Murch    schedule 02.08.2013
comment
@user1671639 user1671639 Извините, я исправлю это.   -  person witrin    schedule 02.08.2013
comment
@WesleyMurch Важно, чтобы display: table-cell; сочеталось с :before или :after.   -  person witrin    schedule 02.08.2013
comment
Используя это в ie9, все в порядке. jsfiddle.net/pymu7wvq Он использует Courier New.   -  person Yaakov Ainspan    schedule 26.10.2015

Ответы (1)


arrow_upward
3
arrow_downward

http://jsfiddle.net/KnfaW/

Мне кажется, что display: table-cell вызывает проблему.

Пользовательские агенты должны игнорировать следующие свойства с псевдоэлементами :before и :after: 'position', 'float', свойства списка и свойства таблицы.

Псевдоэлементы :before и :after допускают следующие значения свойства display:

Если предметом селектора является элемент уровня блока, допустимыми значениями являются «нет», «встроенный», «блочный» и «маркер». Если значение 'display' имеет любое другое значение, псевдоэлемент будет вести себя так, как если бы значение было 'block'.
Если предметом селектора является элемент встроенного уровня, разрешенными значениями являются 'none ' и 'встроенный'. Если значение «отображения» имеет любое другое значение, псевдоэлемент будет вести себя так, как если бы значение было «встроенным».

W3C CSS2

Поэтому вместо display: table-cell используйте display: block. Он будет работать так, как ожидалось. По моему мнению, в этом случае обработка ошибок IE может быть ошибочной.

person Maria    schedule 02.08.2013
comment
Да, я знаю. Но ничего не могу найти по этому поводу. - person witrin; 02.08.2013
comment
Предложение display: block, к сожалению, не является решением в моем случае; что тоже не было вопросом. И я бы сказал, что обработка исключений Internet Explorer здесь является ошибкой, потому что она не ведет себя как block, поскольку игнорирует свойство font-family, которое не является свойством position, float, списком или таблицей. Также все браузеры, даже Internet Explorer, игнорируют спецификацию, потому что они обрабатывают псевдоэлемент как table-cell. - person witrin; 02.08.2013
comment
jsfiddle.net/vE35V Посмотрите на это. Я надеюсь, что это поможет вам найти обходной путь к вашей проблеме. - person Maria; 02.08.2013