Проблема с Edge 44 и grid-template-columns: наследование - PullRequest
Новая
       108

Проблема с Edge 44 и grid-template-columns: наследование

2 голосов
/ 26 мая 2020

Я работаю над макетом, в котором используется сетка CSS с разделами, в которых используется grid-template-columns: inherit;. В основном с использованием техники, описанной в этой статье: https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/

Это отлично работает в основных браузерах, за исключением Edge 44, где grid-template-columns: inherit;, похоже, нарушает макет. Если я просто скопирую унаследованное значение вручную, оно отобразится нормально.

Кто-нибудь знает, почему это происходит, и есть ли способ исправить это без ручного дублирования унаследованных значений?

Вот короткий фрагмент кода, демонстрирующий проблему: 

body {
  display: grid;
  grid-template-columns: [full-start] minmax(2em, 1fr) [main-start] minmax(0px, calc(500px / 2)) [main-right] minmax(0px, calc(500px / 2)) [main-end] minmax(2em, 1fr) [full-end];
}

.breakout {
  background: grey;
  width: 100%;
  grid-column: full;
  display: inherit;
  grid-template-columns: inherit;
}

.content {
  grid-column: main;
}
<body>
  <div class = "breakout">
    <div class = "content">
      <p> This is the content inside the breakout element. It should sit properly within the grid, but for some reason it breaks in Edge 44. </p>
    </div>
  </div>
</body>

РЕДАКТИРОВАТЬ: Похоже, проблема связана с наследованием с calc(). Возможно ошибка?

1 Ответ

0 голосов
/ 26 мая 2020

Я мог воспроизвести проблему в версии Microsoft Edge 44, после тестирования кажется, что если мы будем использовать [full/main-start] с calc(), он покажет эту проблему в Microsoft Edge 44.

В качестве временного решения. , вы можете попробовать установить фиксированный размер для функции minmax () grid-template-columns. Код, как показано ниже: 

    body {
        display: grid;
        grid-template-columns: [full-start] minmax(2em, 1fr) [main-start] minmax(0px, 250px) [main-right] minmax(0px, 250px) [main-end] minmax(2em, 1fr) [full-end];
    } 
    .breakout {
        background: grey;
        width: 100%;
        grid-column: full;
        display: inherit;
        grid-template-columns: inherit;
    }

    .content {
        grid-column: main;
    }

Затем вывод, как показано ниже: enter image description here

...