CSS: не могу получить размер фона: содержать для работы в Firefox 5

Question

Согласно Mozilla Developer Network фоновый размер поддерживается с Firefox 3.6, однако, он явно не работает в моей версии Firefox 5 для OS X. В Safari он выглядит хорошо, но Firefox 5 отображает его некорректно. Есть ли ошибка? Почему я не могу заставить это работать в Firefox?

HTML:

<span class="special button">My button</span>

CSS:

.button {
    background-size: contain;
}
.button.special {
    background: url("/images/special-button-bg.png");
}

Вот jsfiddle, который показывает, что он не работает правильно.

Answer 1

Я не уверен, что происходит, но это работает, если у вас есть:

.button.special {
    background: url("/images/special-button-bg.png");
    background-size: contain;
}

http://jsfiddle.net/nstV7/3/

Я думаю, что background собственность перекрывает background-size имущество. Однако это не объясняет, почему Firefox не ведет себя так же, как Safari.

Answer 2

У меня недавно была та же проблема с этим в следующем сценарии:Win10 + Firefox 55.0.3 64its, фоновое изображение не отображается

Я тестировал с некоторыми другими браузерами и был в порядке, я мог видеть изображение. например: с Win10 + MS Edge и Win10 + IE11 работал правильно

Поскольку я не хотел использовать JavaScript или префикс поставщика ( -moz- и т. Д.), Я пошел на w3c.org, пытаясь найти, что не так, к сожалению, я не нашел решения, но решил попробовать объявить все значения:

Я изменил это:

background-size: contain;

В это:

background-size: contain contain;

Я опубликовал и протестировал, и он работает в следующем:

1. Win10 + MS Edge
2. Win10 + MS IE 11
3. Win10 + Firefox 55/64 бит
4. Win10 + Opera
5. Win Server 2008 + FireFox 55 / 32bit
6. Win Server 2008 + MS IE 11
7. Win Server 2003 + FireFox 52 / 32bit
8. Win Server 2003 + MS IE 6
9. Выиграй 7 + FireFox 54 / 32bit
   10. Win 7 + MS IE 11

Я надеюсь, что это поможет тому, кто хочет избежать использования языков Browser Script или префиксов поставщиков.