Псевдоэлемент: после в IE9 - проблема положения - PullRequest
0 голосов
/ 11 марта 2012

У меня есть HTML-элемент, скажем, nav. Чтобы применить к нему некоторые причудливые стили, я использую nav:after со следующим кодом:

header nav:after {
    content: "";
    width: 925px;
    height: 54px;
    display: block;
    left: -4px;
    top: -4px;
    z-index: -1;
    position: absolute;
}

Во всех браузерах я получаю желаемый результат с этим кодом. Только Internet Explorer 9 ведет себя по-другому.

Элемент :after расположен на 4px слишком высоко и на 4px слишком сильно слева. Как видите, это явно результат CSS, но -4px top и left необходимы для правильного позиционирования элемента во всех других браузерах.

Если я установлю top и left на ноль, то в IE9 это будет выглядеть нормально, но во всех других браузерах это не так.

Так или иначе, это выглядит неправильно - так или иначе, я должен решить для какого типа браузера я хочу стилизовать. Должен быть какой-то обходной путь, что я могу сделать?

...