Firefox: когда изображение НЕ найдено, он разбивает html-слой

Question

В Firefox 27, когда изображение не найдено, высота изображения становится как авто для изображения alt. Это разрывает html-слой (изображение 1). Что я могу сделать, чтобы сделать его похожим на Chrome (если изображение не найдено, высота пребывания как предыдущая) (изображение 2)

Answer 1

Вы можете указать статический или минимальную высоту через CSS, которая всегда будет держать его размеры и расположение останется таким же,

img { 
min-height:300px; 
} 

Answer 2

Что-то вроде этого? $('img').wrap('<div/>').css({minHeight: '100px'});

Answer 3

набор дисплей встроенный блок для изображения:

img{display: inline-block;} 

Answer 4

По моему опыту, img должен иметь вес и высоту атрибутов только из-за этих ситуаций. Эти атрибуты помогают браузеру создавать пространство для элемента DOM перед его визуализацией. Итак, если ваше изображение 100x100 px, тогда атрибуты должны быть weight="100", height="100". Обратите внимание, что px отсутствует, поскольку атрибуты определены в пикселях.

EDIT: Только что заметил. Если вы хотите скрыть что-то, когда изображение не загружено, используйте плагин jQuery waitForImages. Если изображение не загружено, скройте его контейнер.