1

Столкнулся с проблемой: браузеры по-разному размещают относительно спозиционированные блочные элементы.

Вот пример: Вы видите пример шапки сайта, где все элементы (логотип, название фирмы, поле поиска, картинка и лозунг) спозициционированы относительно.

введите сюда описание изображения

Вот пример кода для заголовка ОАО "АБВ":

Imya-firmy{
    position:relative;
    left:110px;
    top:-145px;

    font-family: 'Arial Black', sans-serif;
    font-size:14pt;
}

В зависимости от браузера некоторые элементы «съезжают», например в firefox картинка на парку десятков пикселей выше. И это самое противное: подстраиваешь всё в точности до пикселя, а запускаешь в другом браузере – и всё поехало. Как профессионалы обходят эту проблему?

2
  • Flexbox, позиционирование блоков в процентах, не задавать позицию так жестко в пикселях, разве что ну уж очень не обойтись без этого.
    – Moonvvell
    10 мар 2016 в 13:54
  • @Moonvvell Flexbox не поддерживается в старых браузерах, насколько мне известно, а автор хочет кроссбраузерности..
    – pepel_xD
    10 мар 2016 в 14:23

1 ответ 1

2

Позиционируйте блоки с помощью absolute родительскому контейнеру position: relative , а уже внутренним элементам - absolute и подкручивайте пиксели как нужно....

1
  • Спасибо Вам большое за ответ. Почти получилось: все браузеры, кроме IE (Opera, Firefox, Chrome, Safari, Edge) отобразили корректно, один только IE сместил картинку города пикселей на 10 вниз. 13 апр 2016 в 9:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.