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