Firefox CSS image box

Question

Этот код CSS работает во всех браузерах, кроме FireFox. Зачем ? Как я могу это исправить?

.img_box { 
    width: 110px; 
    height: 160px; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-image: url('https://www.google.com/images/srpr/logo3w.png'); 
} 

Заранее благодарен.

EDIT: Вот HTML, который я хочу использовать:

<img class="img_box" /> 

Answer 1

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

К сожалению, мне еще предстоит найти решение этой проблемы.

В вашем случае, однако, вам будет гораздо лучше использовать div и добавить display:inline-block к вашему CSS, вместо того чтобы использовать изображение.

Answer 2

solution1:

.img_box { 
    width: 110px; 
    height: 160px; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-image: url('https://www.google.com/images/srpr/logo3w.png'); 
    display: block; 
} 

solution2:

<div class="img_box"></div>