Здравствуй, уважаемый друг!

Кажется, ты используешь AdBlock. Этот проект развивается и существует за счет доходов от рекламы.
Добавь, пожалуйста, нас в исключения.

Спасибо за понимание.

Создание сайтов Харьков

Fixed элемент прячется под скроллбар Internet Explorer 11

7 октября 2015 в 19:33 Автор: Nikita_Sp в категории Статьи о CSS 1 комментарий

Одним из популярных фреймворков для верстки страниц при разработке сайтов является Bootstrap. Однако, во время работы над новым проектом, я столкнулся со следующей проблемой: фиксированные элементы, у которых установлено положение справа, скрывались под скроллбар и были недоступны для пользователя.

Проблема scroollbar'а в Internet Explorer

В данной статье я расскажу как избежать этого, и настроить положение элементов прикрепленных к правому краю окна браузера Internet Explorer.

Причина такой проблемы была выявлена на одном из зарубежных форумов, и заключалась в определении ширины видимой области. Интересно, что Bootstrap в своих стилях определяет для Internet Explorer ширину видимой области шириной экрана устройства, т.е. максимально возможной шириной. Таким образом контент располагается от левого до правого края окна, включая область под скроллбаром.

Для устранения данной особенности отображения в браузере Internet Explorer вы можете найти и удалить код из файла bootstrap, или переопределить стиль в своем файле стилей. CSS, отвечающий за видимую область в браузере MS IE выглядит следующим образом:

@-ms-viewport{width:device-width}

Для того чтобы переопределить стиль в своем файле CSS, вы можете использовать следующий код:

@-ms-viewport{width:auto !important}

Таким нехитрым способом мы определим видимую область для Internet Explorer с учетом места под scrollbar и все станет на свои места:

Решение проблемы scroollbar'а в Internet Explorer

Надеюсь, вам помогла статья и вы уже поставили лайк хотя бы через одну из социальных сетей ;), а если знаете другие варианты решения данной проблемы, то уже пишите в комментарии свой вариант решения. Спасибо.

1 комментарий

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вверх!

Меню блога

Категории блога

Облако тегов