VDS за 300р от нашего партнера SpaceWeb
[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
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
[4]
10 Окт 2018, 15:33
Как запретить просмотр сайта по IP?
[просмотров 2795]
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 2305]
[118]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 2236]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 2021]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 1940]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 1932]
[50]
22 Ноя 2011, 14:17
Как удалить vsftpd
[просмотров 1517]
[100]
19 Дек 2014, 16:16
User-agent для Internet Explorer 11
[просмотров 1496]

Вести с Хабра