css - 将 -moz-available 和 -webkit-fill-available 放在同一个宽度(CSS 属性)

Question

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

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

如何在 CSS 3 中执行此操作？

我试着做这样的事情:

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 或 -webkit-fill-available。