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

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

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

如何在CSS3中做到这一点?

我试图做这样的事情:

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

这不会产生预期的结果。

Julian asked 2020-07-26T14:16:59Z
1个解决方案
87 votes

CSS会跳过它不理解的样式声明。 基于Mozilla的浏览器将无法理解width: 100%前缀的声明,而基于WebKit的浏览器将无法理解-moz前缀的声明。

因此,我们可以简单地两次声明width: 100%

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

James Donnelly answered 2020-07-26T14:17:25Z
translate from https://stackoverflow.com:/questions/26275982/putting-moz-available-and-webkit-fill-available-in-one-width-css-property