gassmonkey
@gassmonkey
Провокатор

Почему псевдоэлемент :before с position:absolute в IE ведёт себя не так, как в других браузерах?

ie11
c314f94b3c2f4d8c990792e7e676a577.png
Crome
acb7310dd81c486fa777429bcefd05c5.png
Почему псевдоэлемент :before с position:absolute в IE ведёт себя не так, как в других браузерах?
upd: Добавил пример - codepen.io/anon/pen/QbvWxy
  • Вопрос задан
  • 2682 просмотра
Пригласить эксперта
Ответы на вопрос 1
Carduelis
@Carduelis
Web-developer, front-end, js, less
У псевдоэлемента с position: absolute, не указаны значения left, top, а это означает, что браузер использует свои значения по умолчанию. А они могут вполне разниться от браузера к браузеру.
Разное поведение может обсулавливаться следующем:
когда значение по умолчанию не стоит, браузер отправляет обычный элемент к левому краю элемента с position: relative, или к краю страницы, если таковых элементов нет. Crhome видит разницу между элементами и псевдоэлементами и отправляет псевдоэлемент к краю элемента-родителя, а не элемента с position: relative.
@SelenIT2 уточнил:
Дело в том, что, по стандарту, что угодно с position:absolute и без top/right/left/bottom размещается там, где оно оказалось бы без position:absolute. А псевдоэлемент размещается перед контентом родительского элемента. А когда контент центрирован, возникает неоднозначность, где именно это «перед контентом» — до или после свободного места, добавленного для центрирования. По логике здравого смысла, полагаю, всё-таки ближе к тексту (т.е. Хром более прав).

Как оказалось, не важно: это псевдо элемент или просто элемент, IE ведет себя также. Суть в центровке контента codepen.io/anon/pen/jPmEjK
Поэтому стоит всегда добавляеть пару атрибутов left/top (или других по оси x и оси y ), чтобы позиционирование было однозначным.
Бывает, что иногда в списках position: relative не удается поставить родителю, и приходится не использовать одно из значений left/top, оставляя поведение элемента на усмотрение браузера, но в таком случае лучше изменить html-код, чтобы можно было использовать у родительского элемента списка relative, а у дочернего - absolute
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы