Изображения, которые не отображаются в Chrome до тех пор, пока я не щелкнув элемент проверки

Question

Я столкнулся с странной ошибкой, используя мой сайт OpenCart в Chrome. Изображения продукта не отображаются, но я вижу белую область, в которой они должны появиться.

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

И вот сумасшедшая часть, если я нажимаю на элемент проверки, внезапно появляется изображение.

Некоторые CSS код

.product-list .image { 
float: left; 
margin-right: 10px; 
overflow: auto; 
} 

Answer 1

Это странно. Независимо от того, что нужно проверить:

1. Z-index: Внешняя коробка, которая окружает изображение, может быть «выше» самого изображения. Добавьте z-index к изображению со значением 9999 для проверки
2. Позиция: если это родительский контейнер или бог знает, что еще имеет странное положение, это может повлиять на то, где дочерний элемент, в этом случае появляется изображение.
3. Отключить JS - Javascript может вызвать проблемы здесь, попробуйте отключить его для проверки.
4. Кроме того, при использовании инструментов hrome dev вы технически «нависаете» на изображении. И вы говорите, что это внезапно появляется. Поэтому я бы посмотрел на ваши правила: наведения, применимые к изображениям. Многие сайты будут использовать метод спрайтов, который отображает одно изображение в нормальном состоянии, а затем переводит фон в другую часть одного и того же изображения при наведении. Ваше нормальное состояние может быть пустым, и наведение затем перемещает позицию bkgd в нужное изображение.

Дайте мне знать, как это получается.

Answer 2

В CSS вам необходимо установить ширину и height.