如何为vh大众编写css备份

Question

有人能解释一下CSS中的备份是如何工作的吗？我正试图为vh和大众设置它，很明显我没有得到它.

以下是我尝试过的解决方案，但不起作用。每次都会使用“高度”属性。

CSS：

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

Answer 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单元，它将使用它而不是41 of，就像color: blue; color: red;最终会变成红色一样。如果它不理解vh单元，它将忽略它，而且，由于我们首先定义了回退，浏览器忽略vh单元这一事实并不重要。

讲得通?

Answer 2

把你的跌倒置于你的其他价值之上。如果重写值在浏览器上无效，则使用第一个值。

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

Answer 3

属性-moz-height、-webkit-height、-o-height和-ms-height不是有效的扩展属性，它们不是由任何UA实现定义的。

因为height: 41px (在Chrome或Safari中)根本没有被识别，但是height: 41px却被认为是赢家。

您会想要使用这个：

height: 41px;    
height: 5.2vh;

...with这段代码，浏览器将首先识别height: 41px，然后如果它们识别将要应用的height: 52.vh，否则它们将恢复到最后一个“好”值：41px。