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

问题描述

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

I want to make the width of the footer browser-independent.

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

For Mozilla I want to use the value of -moz-available, and when a user uses Opera, then CSS should get the values from -webkit-fill-available.

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

How can I do this in CSS 3?

我尝试做这样的事情:

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

这不会产生预期的结果.

This won't give the desired results.

推荐答案

CSS 将跳过它不理解的样式声明.基于 Mozilla 的浏览器不会理解 -webkit-前缀声明，基于 WebKit 的浏览器不会理解 -moz-前缀声明.

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.

因此，我们可以简单地声明两次width:

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

开头声明的 width: 100% 将被忽略 -moz 和 -webkit 前缀声明的浏览器使用或不支持 -moz-available 或 -webkit-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.

这篇关于将 -moz-available 和 -webkit-fill-available 放在一个宽度中(CSS 属性)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！