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

问题描述 投票：-2回答：1

我想在Edge和IE11上使用 -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?

EDIT以下是一个例子： select width在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>
css google-chrome internet-explorer firefox
1个回答
0
投票

作为一个变通方法，你可以尝试为控件类设置min-width: 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传统浏览器中的输出。

enter image description here

在IE 11浏览器中输出。

enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.