将-moz-available和-webkit-fill-available放在一个宽度中（css属性）

我想使页脚的宽度与浏览器无关。

对于Mozilla，我想使用的值-moz-available，并且当用户使用Opera时，CSS应该从中获取值-webkit-fill-available。

如何在CSS3中做到这一点？

我试图做这样的事情：

width: -moz-available, -webkit-fill-available;

这不会产生预期的结果。

CSS会跳过它不了解的样式声明。基于Mozilla的浏览器将无法理解-webkit前缀声明，而基于WebKit的浏览器将无法理解-moz前缀声明。

因此，我们可以简单地声明width两次：

elem {
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}

在width: 100%一开始宣布将通过忽略两种浏览器上使用-moz，并-webkit-prefixed声明或不支持-moz-available或-webkit-fill-available。