Положение изображения Firefox (наложение)

Question

Положение изображения Firefox (наложение)

0

Некоторое время я искал эту небольшую проблему, и я не могу ее исправить. Это только firefox, но это ужасно в IE Chrome и т.д.

Этот сайт, который я сделал для клиента, показывает проблему. В начале страницы вы видите 2 изображения в формате PNG. Три из этих изображений есть, вы можете переключить z-индекс, щелкнув круглые круги внизу изображения.

Как вы видите, черный цвет немного ниже, я не могу обернуть голову вокруг проблемы, так как высота линии равна 0, а способ расположения черного изображения такой же, как серый. Они немного уменьшены из-за максимального размера: 100%, но изменение размера их до надлежащего (1000 пикселей), похоже, тоже не помогает (это было сделано локально).

Если вы открываете фотографии в Photoshop или w/e, они точно выровнены.

У кого-нибудь есть идеи, почему это происходит неправильно только для Firefox?

→ example Удалил пример, так как это веб-сайт.

Mathijs Segers 15 май 2014, в 19:46

Источник

2

Пожалуйста, включите ваш код и JSFiddle или аналогичную ссылку в песочнице, а не просто ссылку на ваш сайт.
TylerH 15 май 2014, в 17:26
0

конечно, странно, может иметь какое-то отношение к тому факту, что они относительно позиционированы, а не абсолютны
Huangism 15 май 2014, в 17:32
0

Я добавлю это позже, не так просто.
Mathijs Segers 15 май 2014, в 17:39

Показать ещё 1 комментарий

Теги:

html

css

image

firefox

2 ответа

0

Это из-за пробелов между элементами. К сожалению, некоторые браузеры наблюдают за ним, и поэтому отображается некоторое пространство, хотя это не должно. Вы можете использовать это обходное решение: обычно работайте с rem вместо em, вам нужно, чтобы этот обходной путь работал легче. Сначала вы должны установить font-size .infographic равным нулю. Каждый элемент внутри вашей .infographic теперь станет размером font-size равным нулю, потому что вы используете em. Вот причина, почему вы должны теперь изменить к rem, по крайней мере, для элементов внутри .infographic.

Теперь все готово.

KittMedia 15 май 2014, в 14:57

0

Я попытался сделать это без пробелов, поэтому я не думаю, что это работает, но я попробую.
Mathijs Segers 15 май 2014, в 18:09

Ещё вопросы

Пожалуйста, включите ваш код и JSFiddle или аналогичную ссылку в песочнице, а не просто ссылку на ваш сайт.
конечно, странно, может иметь какое-то отношение к тому факту, что они относительно позиционированы, а не абсолютны
Я добавлю это позже, не так просто.
Я попытался сделать это без пробелов, поэтому я не думаю, что это работает, но я попробую.

Shan Robertson · Accepted Answer · 2014-05-15T14-53-00.000Z

Очень странная проблема. Единственное, что я мог заставить его уйти, это абсолютно поместить колеса. для этого вам потребуется установить высоту на #infographic и снять margin-top:-100%; , В зависимости от того, как вы используете контейнер #infographic это решение может быть не идеальным для вас, но, по крайней мере, что-то, чтобы рассмотреть, чтобы помочь решить вашу проблему.

Я решил это таким образом. У меня еще есть 1 родственник и два абсолюта. (Итак, первые 2 абсолютных третьих родственника). Глупо, что это не сработало с -margin, хотя это немного хакерски.