Метка <img>, выделенная серым в firebug, обнаружила причину, по которой изображение не отображается Нужна помощь в исправлении - PullRequest
9 голосов
/ 24 августа 2010

Я отлаживаю сайт для отсутствующих изображений.Сайт интенсивно использует GWT, поэтому исходный код не такой многословный.Я начал отлаживать его с помощью firebug и обнаружил, что все теги выделены серым цветом в источнике DOM для firebug.Если я отредактирую тег изображения в консоли Firebug, скажем, добавив только пробел, то тег изображения больше не будет серым, и, следовательно, появится на странице.

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

Ответы [ 6 ]

7 голосов
/ 20 октября 2010

В моем случае мое изображение было серым (серым) в firebug из-за изображения, имеющего его высоту и ширину до 0 px, поэтому оно было эффективно скрыто на экране. поэтому я сделал вывод, что выделение серым цветом означает, что его не видно на экране.

7 голосов
/ 24 августа 2010

Скорее всего - изображение скрыто (возможно, через CSS). Нажмите на тег, чтобы увидеть примененные к нему стили - скорее всего, вы увидите display: none или что-то похожее.
Относительно того, почему изображения скрыты - либо правила CSS были перепутаны и привели к такому поведению (Firebug должен помочь в расследовании), либо это часть логики приложения (скрыть индикатор выполнения, когда он не нужен, и т. Д.).

1 голос
/ 29 июня 2012

У меня была такая же проблема.Firebug показывал мой контейнерный элемент, на котором было изображение серого цвета.Элемент отображался в Firefox (и других современных браузерах), но не в IE8.

Зная, что я настраивал display: none;и позже в скрипте, делающем его блоком, не было моей проблемы ... добавление отсутствующей ширины и высоты в стиле было для меня исправлением.

Для меня это был вопрос явной установки шириныи высота моего div (который содержит мой img) внутри контейнера div.У меня не было ширины и высоты на моем абсолютно расположенном div.Как только я добавил, что серый цвет в Firebug был сплошным.Также исправлена ​​проблема с отсутствующим div в IE8!(Именно это и поставило меня на путь отладки в первую очередь)

IE8 любит устанавливать ширину и высоту, где все другие современные браузеры не заботились и все еще отображали div.Firebug показывал элемент серым цветом, но браузер Firefox отображал элемент div просто отлично.

  #slidesContainer {
    position: relative;
    width: 871px;
    height: 275px;
    padding: 8px 8px;
    overflow: hidden;
  }

  #slidesContainer div {
    position: absolute;
    width: 871px;
    height: 275px;
    display: none;
  }
0 голосов
/ 10 февраля 2017

У меня была такая же проблема с иконками социальных сетей, и это также было причиной блокировки рекламы (в Firefox) Альтернативный текст значков содержал alt = "Facebook" (Twitter, Instagram). Чтобы решить эту проблему, достаточно было изменить его на alt = "Facebook_xxx".

0 голосов
/ 28 января 2013

Другой FYI - мой ФАЙЛ был назван xxx- ads .swf, и этот файл НЕ отображался в Firefox или Chrome, но отлично работал в Safari, IE и Opera.

Я работаюAdblock plus в Firefox и Chrome.

Мне кажется, что, как обычная практика программного обеспечения, Adblock пытается быть слишком умным в своем обнаружении.Обошлось мне примерно в 2 дня отладки.Grrrr.

Слава Богу, я наконец нашел этот форум.

0 голосов
/ 09 января 2013

Как к сведению других людей, у меня была эта проблема, и я не мог ее решить - Firebug правильно выделил невидимые изображения. Я использую надстройку AdBlock Plus, которая скрывала изображения, потому что они были в папке с рекламой. Дешевой раздачей было то, что к изображениям добавлены классы со случайной строкой, например класс = "auwhaezfynjjayjvlasn". Я изменил название папки с объявлениями и вуаля, видимые и больше не серые в Firebug.

...