将 -moz-available 和 -webkit-fill-available 放在一个宽度（CSS 属性）答案

【问题标题】：Putting -moz-available and -webkit-fill-available in one width (CSS property)将 -moz-available 和 -webkit-fill-available 放在一个宽度（CSS 属性）
【发布时间】：2014-12-04 05:45:16
【问题描述】：

我想让页脚的宽度独立于浏览器。

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

如何在 CSS 3 中做到这一点？

我试图做这样的事情：

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

这不会产生预期的结果。

【问题讨论】：

只需将两个属性定义为单独的宽度声明即可。
stackoverflow.com/questions/3383923/…
我这样做了：宽度：-moz-available;宽度：-webkit-fill-available；结果是它不需要的。
width: -moz-available; width: -webkit-fill-available; 浏览器会忽略它不理解的声明。
这很奇怪...我第二次尝试了它，现在它可以工作了。嗯，我猜 CSS 有时喜欢取笑我。

标签： css responsive-design

【解决方案1】：

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

因此，我们可以简单地声明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 的浏览器使用。

【讨论】：

我不想问，但是 IE 也有这个填充可用属性吗？
@Julian 根据我可以使用...，不，它没有：caniuse.com/#feat=intrinsic-width。 IE 将此列为“建设中”：status.modern.ie/cssintrinsicsizing.
fill-available 已根据最近的规范更改更改为 stretch。
你能链接到那个规范吗？
@user3631047 请链接到规范

【解决方案2】：

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

【讨论】：

stretch 有效吗？我看到它在浏览器中被忽略了
为什么？你能详细说明吗？请通过editing (changing) your answer 回复，而不是在 cmets 中（without "Edit:"、"Update:" 或类似的 - 答案应该看起来像是今天写的)。
是的，我们现在使用“stretch”，autoprefixer 将其处理为height: -webkit-fill-available; height: -moz-available; height: stretch;
stretch 无法处理 Opera