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

Question

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

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

如何在CSS3中执行此操作？

我试着这样做：

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

这不会给出预期的结果。

Answer 1

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前缀声明的浏览器使用，或者不支持-moz-available或{{1} }。

Answer 2

您应该使用 stretch 而不是 fill-available。