Как установить ширину для заполнения в CSS для Microsoft Edge? - PullRequest
Новая
       50

Как установить ширину для заполнения в CSS для Microsoft Edge?

0 голосов
/ 06 февраля 2020

Я делал страницу для Google Chrome и использовал width: -webkit-fill-available, но когда я проверял на Microsoft Edge, я заметил, что ширина была другой.

Поэтому я искал и нашел этот ответ для поддержки большинства браузеров. 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:

Google Chrome

Microsoft Edge с типом документа:

Microsoft Edge with doctype

Microsoft Edge без типа документа:

Microsoft Edge without doctype

Как настроить ширину на заполнить доступное пространство для обоих браузеров и все еще поддерживать объявление doctype? Я хочу универсальное c решение, которое работает так же, как -webkit-fill-available, а не конкретное c, такое как calc(100% - 4% - 2px).

1 Ответ

1 голос
/ 06 февраля 2020

Вы можете использовать flexbox для этого просто обернуть ваши элементы в гибкий контейнер: 

* {
  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>
...