Ответ 1

Ваш код (и почему он не работает)

Глядя на ваш оригинальный код, у меня есть несколько комментариев:

-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px;  /* The Fallback */

Префиксы, бит -webkit-, применяются только в том случае, если это имя имеет префиксное свойство. Высота не имеет префиксного свойства, поэтому браузеры просто игнорируют эти объявления.

(Совет. Вы можете проверить что-то вроде MDN, чтобы узнать, какие существуют свойства.)

Решение:

В этом случае мы можем воспользоваться тем фактом, что, если браузеры сталкиваются с свойством или значением, которое они не понимают, они игнорируют его и переходят к нему. Итак, что вы ищете, это что-то вроде:

height: 41px;
height: 5.2vh;

Браузер видит height: 41px, как и ожидалось. Он разбирает это и знает, что с ним делать. Затем он видит height: 5.2vh. Если браузер понимает блок vh, он будет использовать это вместо 41px, так же как color: blue; color: red; окажется красным. Если он не понимает блок vh, он проигнорирует его, и, поскольку мы сначала определили резервную ошибку, тот факт, что браузер игнорирует блок vh, не имеет значения.

Имеют смысл?

Ответ 2

Поместите свое падение назад выше других значений. Если переопределяющие значения не работают в браузере, используется первое значение.

 height: 41px;  /* The Fallback */
height: 5.2vh;

Ответ 3

Свойства -moz-height, -webkit-height, -o-height и -ms-height не являются допустимыми свойствами расширения, они не определены ни одной из реализаций UA.

Вы получаете height: 41px как выигрышное значение, потому что -webkit-height (в Chrome или Safari) вообще не распознается, но height: 41px есть.

Вы хотите использовать это:

height: 41px;    
height: 5.2vh;

... с этим кодом браузер сначала распознает height: 41px, затем, если они распознают height: 52.vh, который будет применяться, в противном случае они вернутся к последнему "хорошему" значению: 41px.