Fixed элемент прячется под скроллбар Internet Explorer 11
7 октября 2015 в 19:33 в категории Статьи о CSS 1 комментарийОдним из популярных фреймворков для верстки страниц при разработке сайтов является Bootstrap. Однако, во время работы над новым проектом, я столкнулся со следующей проблемой: фиксированные элементы, у которых установлено положение справа, скрывались под скроллбар и были недоступны для пользователя.
В данной статье я расскажу как избежать этого, и настроить положение элементов прикрепленных к правому краю окна браузера 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 и все станет на свои места:
Надеюсь, вам помогла статья и вы уже поставили лайк хотя бы через одну из социальных сетей ;), а если знаете другие варианты решения данной проблемы, то уже пишите в комментарии свой вариант решения. Спасибо.
1 комментарий
Спасибо!