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

Question

我正在为 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>

Google Chrome:

带有文档类型的 Microsoft Edge：

没有文档类型的 Microsoft Edge：

如何设置宽度来填充两个浏览器的可用 space 并仍然保持文档类型声明？我想要一个与 -webkit-fill-available 工作方式相同的通用解决方案，而不是像 calc(100% - 4% - 2px).

这样的特定解决方案

Answer 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>

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

How to set width to fill-available in CSS for Microsoft Edge?

html

css

doctype

google-chrome

microsoft-edge