将 -moz-available 和 -webkit-fill-available 放在一个宽度（css 属性）中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26275982/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Putting -moz-available and -webkit-fill-available in one width (css property)
提问by Julian
I want to make the width of the footer browser-independent.
我想让页脚的宽度与浏览器无关。
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.
对于 Mozilla，我想使用 的值-moz-available，当用户使用 Opera 时，CSS 应该从-webkit-fill-available.
How to do this in CSS3?
如何在 CSS3 中做到这一点？
I tried to do something like this:
我试图做这样的事情：
width: -moz-available, -webkit-fill-available;
This won't give the desired results.
这不会给出预期的结果。
回答by James Donnelly
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.
CSS 将跳过它不理解的样式声明。基于 Mozilla 的浏览器不会理解-webkit-prefixed 声明，基于 WebKit 的浏览器不会理解-moz-prefixed 声明。
Because of this, we can simply declare widthtwice:
因此，我们可以简单地声明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;
}
The width: 100%declared at the start will be used by browsers which ignore both the -mozand -webkit-prefixed declarations or do not support -moz-availableor -webkit-fill-available.
在width: 100%一开始宣布将通过忽略两种浏览器上使用-moz，并-webkit-prefixed声明或不支持-moz-available或-webkit-fill-available。
