将-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.

如何在CSS3中做到这一点?

How to do this in CSS3?

我试图做这样的事情:

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属性)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！