将-moz-able 和-webkit-fill-领先一个宽度(CSS 属性)

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

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

我如何在 CSS3中做到这一点？

我试过这样做:

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

这不会产生预期的结果。

203340 次浏览
小开
最佳答案

CSS will skip over style declarations it doesn't understand. Mozilla-based browsers will not understand -webkit-prefixed declarations, and WebKit-based browsers will not understand -moz-prefixed declarations.

Because of this, we can simply declare width twice:

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;
}

The width: 100% declared at the start will be used by browsers which ignore both the -moz and -webkit-prefixed declarations or do not support -moz-available or -webkit-fill-available.

小开

You should use stretch instead of fill-available.

小开

In my case, min-width did the trick:

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

提交答案