如何在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

作为解决方法，您可以尝试为控件设置 min-width: 100% class。

开头声明的 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 旧版浏览器中的输出：

在 IE 11 浏览器中的输出：

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

How to use -webkit-fill-available on Edge and IE11?

css

firefox

internet-explorer

google-chrome