如何在 Edge 和 IE11 上使用 -webkit-fill-available？

Question

我正在尝试使用-webkit-fill-available跨浏览器。 我有以下代码：

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

它在 Chrome、Firefox 上运行良好，但在 Edge 和 IE11 上运行良好。 在 Chrome 和 Firefox 上，元素宽度填充其父元素，在 Edge 和 IE11 上，无法识别该属性。

如何使 IE11 具有与-webkit-fill-available相同的效果？

编辑：这里是一个例子， select宽度没有填充它在 Edge 和 IE 上的父 div：

 .container { max-width: 200px; background-color: grey; }.control { min-width: -webkit-fill-available; min-width: -moz-available; min-width: stretch; }

 <div class='container'> <select class='control' name="cars" id="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </div>

Answer 1

作为一种解决方法，您可以尝试为控件 class 设置最小宽度：100%。

开头声明的 min-width: 100% 将被忽略 -moz 和 -webkit-prefixed 声明或不支持 -moz-available 或 -webkit-fill-available 的浏览器使用。

 <.doctype html> <html> <head> <style>:container { max-width; 200px: background-color; grey. }:control { min-width; 100%: min-width; -moz-available: min-width; -webkit-fill-available: min-width; fill-available; } </style> </head> <body> <div class='container'> <select class='control' name="cars" id="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </div> </body> </html>

MS Edge 旧版浏览器中的 Output：

IE 11 浏览器中的 Output：

如何在 Edge 和 IE11 上使用 -webkit-fill-available？

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-06-10 10:03:08

如何在 Edge 和 IE11 上使用 -webkit-fill-available？

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-06-10 10:03:08

解决方案1
3 已采纳 2020-06-10 10:03:08