如何在 Microsoft Edge 的 CSS 中将宽度设置为可用填充？答案

【问题标题】：How to set width to fill-available in CSS for Microsoft Edge?如何在 Microsoft Edge 的 CSS 中将宽度设置为可用填充？
【发布时间】：2020-05-22 12:04:26
【问题描述】：

我正在为 Google Chrome 创建一个页面并使用 width: -webkit-fill-available，但当我测试 Microsoft Edge 时，我发现宽度不同。

于是我搜索并发现this answer 支持大多数浏览器。 Microsoft Edge 会忽略除100% 之外的所有宽度。

经过测试，我注意到当我删除 doctype (<!DOCTYPE html>) 时它看起来不错，但如果我有它，我认为这是推荐的，它看起来并不像它所支持的那样。

下面是一些简化的代码：

<!DOCTYPE html>
<html>

<head>
  <style>
    div {
      background-color: rgb(196, 196, 196);
      width: 50%;
    }
    
    input,
    select {
      background: none;
      border: 1px solid rgb(0, 0, 0);
      padding: 2%;
      width: 100%;
      /* Microsoft Edge */
      width: -moz-available;
      width: -webkit-fill-available;
      /* Google Chrome */
      width: fill-available;
    }
  </style>
</head>

<body>
  <div>
    <select></select><input>
  </div>
</body>

</html>

谷歌浏览器：

带有文档类型的 Microsoft Edge：

没有文档类型的 Microsoft Edge：

如何设置宽度以填充两个浏览器的可用空间并仍然保持 doctype 声明？我想要一个与-webkit-fill-available 工作方式相同的通用解决方案，而不是像calc(100% - 4% - 2px) 这样的特定解决方案。

【问题讨论】：

box-sizing: border-box; width: 100% 应该适用于所有浏览器。不需要前缀属性。

标签： html css google-chrome microsoft-edge doctype

【解决方案1】：

您可以为此使用 flexbox，只需将您的元素包装在一个 flex 容器中：

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  width: 50%;
}

select,
input {
  border: 1px solid green;
  padding: 2%;
}

<div class="container">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  <input placeholder="stuff" />
</div>

【讨论】：