Одним з популярних фреймворків для верстки сторінок при розробці сайтів є 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 і все стане на свої місця:
Сподіваюся, вам допомогла стаття і ви вже поставили лайк хоча б через одну із соціальних мереж;), а якщо знаєте інші варіанти вирішення даної проблеми, то вже пишіть в коментарі свій варіант вирішення. Дякуємо.