Firefox добавляет дополнительное пространство после изображения в div (или делает div больше)

Он каждый,

У меня проблема с Firefox на этом веб-сайте, над которым я работаю:

Ссылка

Я создал горизонтальный слайдер, который отлично работает во всех браузерах, кроме firefox (как в OSX, так и в Windows). Проблема в том, что firefox показывает больше полей/отступов/отступов после изображений в ползунке, чем по 5 пикселей слева и справа, которые он должен иметь. Еще одна странность заключается в том, что первое изображение имеет меньший интервал, чем остальные изображения.

Я попытался включить обходной путь .js с этим:

function onPageLoad(){
    // Firefox rare spacing fix //
    setTimeout(function() {
        jQuery('.horizItem').each(function() {
            var outerWidth = jQuery(this).find('img').outerWidth();
            jQuery(this).width(outerWidth);
        });
    }, 300);
}
onPageLoad();

Это работает в большинстве случаев, но иногда делает div, содержащие изображения, шириной 10 или 20 пикселей. Таким образом, это портит слайдер.

Есть ли простое исправление CSS, которое я могу применить, чтобы удалить эти странные интервалы?

Кажется, я действительно не могу найти источник интервала в инспекторе элементов... Когда я сравниваю ширину div с шириной изображения, разница (минус предполагаемое поле в 10 пикселей ) составляет 15,883 пикселя, что также является странным числом.

Кто-нибудь может мне помочь? Я чувствую, что это очень простая ошибка, которую я где-то делаю.

Огромное спасибо.


image html firefox margin spacing
person Wouter Alberts    schedule 18.08.2014    source источник
comment
Используете ли вы какой-либо фреймворк для чего-то? Судя по странной чрезмерной ширине, я думаю, что где-то может быть добавлено дополнение/маржа в процентах.   -  person Pieter VDE    schedule 18.08.2014
comment
Это сайт WordPress и существующая тема, но, тем не менее, я не могу найти источник... Я схожу с ума, пытаясь это исправить... Сам клиент использует Firefox, к сожалению.   -  person Wouter Alberts    schedule 20.08.2014

Ответы (1)


arrow_upward
1
arrow_downward

У меня была похожая проблема при создании тем для Tumblr; что изображения и фотонаборы Tumblr (фотографии, отображаемые в iframe) показывают небольшое «отступ» под ними, несмотря на то, что отступ равен нулю в CSS. Решение состояло в том, чтобы сделать их блоками;

img, iframe {
    display: block;
}

Может быть, вы могли бы попробовать отобразить свои изображения как inline-block, так как они расположены рядом?

person riverbell    schedule 18.08.2014
comment
Спасибо, но я уже сделал блоки тегов img, но у меня это не работает, к сожалению. - person Wouter Alberts; 20.08.2014