float div cross browser.Все остальные браузеры выглядят нормально, кроме 1

Question

Мне действительно нужна ваша помощь, потому что это сводит меня с ума.

На моем веб-сайте www.markett.nl У меня есть 2 деления, плавающие рядом друг с другом.

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

Я читал, что, возможно, это связано с некоторыми проблемами с заполнением CSS,но я считаю, что отступы не используются на этих элементах div.Я использую Firebug для понимания CSS, но не могу решить мою проблему.

Я загрузил 2 изображения, чтобы вы могли увидеть, что это за зонд:

Изображение1, как это загружается в большинстве браузеров.

Изображение 2 покажет проблему.

Answer 1

У вас есть @media запросов в вашем файле CSS для адаптивного макета.Найдите это в своем CSS (около строки 2640):

@media (max-width: 800px) {
    /* Simplify the basic layout */
    #main #content {
        margin: 0 7.6%;
        width: auto;
    }

и удалите атрибут margin из этого правила.Также вам не нужно тестировать на iPad результат - вы можете просто изменить ширину окна вашего браузера.

Answer 2

Вы используете медиазапросы , чтобы выполнять разные действия в зависимости от ширины области просмотра.

Если вы загружаете свой сайт в любом браузере (я тестирую с Firefox, дляпример) и достаточно уменьшите ширину окна, возникает та же проблема.

Чтобы исправить это, следуйте инструкциям Золтана Тота.