Что делать, если в Internet Explorer колонка/контент сайта съезжает вниз и влево?
2013-04-23Как я уже говорила в статье “Проблемы совместимости сайта с разными браузерами и их версиями”, одна из важнейших задач вебмастера – обеспечение кроссбраузерности сайта: нам нужно сделать все возможное и невозможное, чтобы создаваемый проект ровно и четко отображался разными программами-браузерами, именно в том виде, как мы задумали. Поэтому первое, что необходимо сделать в этом направлении – очистить настройки браузера для отображения сайта по-умолчанию, используя специальный css-код. Однако, одного этого действия очень часто оказывается недостаточно для того, чтобы подружить свой сайт с Internet Explorer-ом.
Столкнулась с ситуацией, что при отображении страницы трехколоночного сайта, построенного на блочной верстке, в браузере Internet Explorer средняя колонка съезжала влево и вниз, располагаясь под левым сайдбаром. А поскольку в средней колонке как раз и расположено основное содержимое сайта, то есть контент, то на решение данной проблемы нельзя было “забить”, отмахнувшись, дескать, пусть мои посетители используют нормальные браузеры. Когда под заголовком и основным меню сайта пустота, а контент надо искать где-то внизу страницы под сайдбаром – сайт производит на визитера не самое лучшее впечатление.
При этом отмечу, что в Опере, Файрефоксе и ГуглХроме мой сайт отображался как положено. Да и в IE указанная проблема возникала только на некоторых страницах, содержащих циклы.
Почему же так случилось?
Предположительно, что-то внутри блоков div, составляющих колонки сайта, превысило их размеры и браузер IE заботливо растянул блоки.
В такой ситуации приходят на ум два способа решения проблемы. Первый – поиск элемента, превышающего размеры одного из блоков. Второй, более быстрый – борьба со следствием этого превышения путем указания запрета растягивания соответствующих блоков.
Чтобы воспользоваться вторым способом, потребуется прописать в файле стилей style.css свойство блока, запрещающее его растягивание.
1 |
overflow: hidden; |
В моем случае оказалось достаточно указать это свойство для div, содержащего правый сайдбар:
1 2 3 4 5 |
#sidebar-right { float: left; width: 200px; overflow: hidden; } |
И все встало на свои места. Ура!
Должна сказать, увы, что это не единственный сбой в отображении сайта в браузере Internet Explorer, поэтому по мере нахождения решений буду писать о них и делиться с вами, друзья, своим вебмастерским опытом.