Что делать, если в Internet Explorer колонка/контент сайта съезжает вниз и влево?

2013-04-23

Как я уже говорила в статье “Проблемы совместимости сайта с разными браузерами и их версиями”, одна из важнейших задач вебмастера – обеспечение кроссбраузерности сайта: нам нужно сделать все возможное и невозможное, чтобы создаваемый проект ровно и четко отображался разными программами-браузерами, именно в том виде, как мы задумали. Поэтому первое, что необходимо сделать в этом направлении – очистить настройки браузера для отображения сайта по-умолчанию, используя специальный css-код. Однако, одного этого действия очень часто оказывается недостаточно для того, чтобы подружить свой сайт с Internet Explorer-ом.

Столкнулась с ситуацией, что при отображении страницы трехколоночного сайта, построенного на блочной верстке, в браузере Internet Explorer средняя колонка съезжала влево и вниз, располагаясь под левым сайдбаром. А поскольку в средней колонке как раз и расположено основное содержимое сайта, то есть контент, то на решение данной проблемы нельзя было “забить”, отмахнувшись, дескать, пусть мои посетители используют нормальные браузеры. Когда под заголовком и основным меню сайта пустота, а контент надо искать где-то внизу страницы под сайдбаром – сайт производит на визитера не самое лучшее впечатление.

При этом отмечу, что в Опере, Файрефоксе и ГуглХроме мой сайт отображался как положено. Да и в IE указанная проблема возникала только на некоторых страницах, содержащих циклы.

Почему же так случилось?

Предположительно, что-то внутри блоков div, составляющих колонки сайта, превысило их размеры и браузер IE заботливо растянул блоки.

В такой ситуации приходят на ум два способа решения проблемы. Первый – поиск элемента, превышающего размеры одного из блоков. Второй,  более быстрый – борьба со следствием этого превышения путем указания запрета растягивания соответствующих блоков.

Чтобы воспользоваться вторым способом, потребуется прописать в файле стилей style.css свойство блока, запрещающее его растягивание.

В моем случае оказалось достаточно указать это свойство для div, содержащего правый сайдбар:

И все встало на свои места. Ура!

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

Статья пригодилась? Буду признательна, если поделитесь в соцсетях:

Комментарии


Комментариев пока нет, будьте первым.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">