[1]
11 Фев 2015, 12:27

Заметки про позиционирование и кроссбраузерность

Указывание position: absolute без top, left, right или bottom — не кроссбраузерное решение. Такое позиционирование не будет работать в IE 11 и ниже. Указывание сторон позиционирования с числовым значением (auto тоже работать не будет) при абсолютном позиционировании обязательно для корректной работы в IE.

Вот уже 15 лет (с 2000-го года) позиционирование не работает вместе с табличным отображением элементов в Firefox! Это значит, что если попытаться применить, к примеру, вертикальное выравнивание с помощью определения элементов как display: table и display: table-cell соответственно, и при этом в том же CSS правиле указать position: absolute или position: relative, то выравнивание не сработает в Firefox.

Раз: http://davidwalsh.name/table-cell-position-absolute

Два: http://stackoverflow.com/questions/17526370/position-relative-not-working-with-display-table-cell

Важно с самого начала правильно настроить автопрефиксер в Grunt для кроссбраузерности. Например,

autoprefixer: { options: { browsers: ['last 2 versions', 'Android 4', 'ie 8', 'ie 9', 'Firefox >= 27', 'Opera >= 12.0', 'Safari >= 6'] }, single_file: { src: 'css/styles.css' } },

Что-то вроде литании против страха

Признать свое поражение — это НОРМАЛЬНО
Быть Новичком — это НОРМАЛЬНО
Уйти с работы вовремя — это НОРМАЛЬНО

http://habrahabr.ru/post/250305/

#ie #position #позиционирование #absolute #узнал сегодня

Комментарии (3)
zzoll
12 Фев 2015, 12:42
#

Вы имеете в виду не указывания ни одной стороны позиционирования?

ncer
13 Фев 2015, 09:57
#

Да, вот такая запись будет работать везде, кроме IE:

position: absolute
margin: 50px 50px 0 0;

При такой записи в любом другом браузере элемент можно позиционировать с помощью margin. Для IE такое позиционирование работать не будет.

Тут напрашивается другой вывод, что позиционировать абсолютные элементы нужно теми средствами которые для них предусмотрены стандартом, т.е. с помощью top, left, right или bottom. Никаких марджинов.

position: absolute
top: 50px;
right: 50px;

Ну это так, грабли, на которые наступил.

zzoll
13 Фев 2015, 11:18
#

А, да… Я никогда margin`ом не сдвигал позиционирующий блок. Буду занать.

Добавить комментарий

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки: