Процентное заполнение / поле для элемента сетки игнорируется в Firefox

Этот codepen создает сетку из красных ячеек 100*50 пикселей в Chrome. Это ожидаемое поведение.

введите здесь описание изображения

#grid{
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 100px 100px;
}
.cell{
  background-color: red;
  padding-bottom: 50%;
}
<div id="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

Firefox 52 полностью игнорирует padding-bottom: 50%;, и я не знаю почему.

Я не могу найти обходной путь. Кто-нибудь может мне помочь?


css css-grid firefox
person Ploppy    schedule 10.03.2017    source источник
comment
Ваше дополнение выглядит одинаковым как в Chrome, так и в Firefox. Можете ли вы уточнить, в чем проблема?   -  person Obsidian Age    schedule 10.03.2017
comment
Вы видите сетку красных ячеек 100x50px в Firefox? Firefox 52 ничего мне не дает, у меня только зазор сетки 8px. Красных клеток нет вообще.   -  person Ploppy    schedule 10.03.2017
comment
Firefox 51.0.1 (последняя версия Firefox) показывает мне красные ячейки. Вы уверены, что у вас Firefox 52? Вы получили бета-версию? Это может быть проблемой.   -  person Obsidian Age    schedule 10.03.2017
comment
Firefox 52, это не бета-версия. Это ошибка? Поскольку я тестировал, и firefox не игнорирует этот отступ за пределами сетки.   -  person Ploppy    schedule 10.03.2017
comment
Странно, 52 вышел три дня назад, но мои отчеты 51.0.1 актуальны. В любом случае, может быть трудно сказать, применяется ли отступ, поскольку CodePen будет полностью твердым независимо от того, есть ли у вас отступ или нет. Отступ включает цвет фона; вместо этого вы можете искать margin-bottom. Кроме того, процент относится к области содержимого элемента. Поскольку вы явно не указываете это, вы можете получить странные результаты. Возможно, Firefox 52 пытается «исправить это».   -  person Obsidian Age    schedule 10.03.2017
comment
Вот тест: jsfiddle.net/rLorj6oh Работа на FF 52.   -  person Ploppy    schedule 10.03.2017
comment
Я выделяю область для рендеринга изображения в плитке с заданным соотношением, единственный способ, который я знаю, - это использовать padding-bottom, а затем использовать абсолютную позицию на изображении.   -  person Ploppy    schedule 10.03.2017

Ответы (2)


arrow_upward
4
arrow_downward

Из спецификации:

6.4. Поля и отступы элемента сетки

Авторам следует полностью избегать использования процентных значений в отступах или полях элементов сетки, поскольку они будут вести себя по-разному в разных браузерах.

Вот полный раздел:

Поскольку соседние элементы сетки независимо содержатся в содержащем блоке, образованном их областями сетки, поля смежных элементов сетки не схлопываются.

Процентные поля и отступы в элементах сетки могут быть разрешены:

  • их собственная ось (левый/правый процент разрешается по ширине, верхний/нижний разрешается по высоте), или,
  • встроенная ось (левый/правый/верхний/нижний процент разрешается в зависимости от ширины)

Пользовательский агент должен выбрать одно из этих двух действий.

Примечание. Это отклонение отстой, но оно точно отражает текущее состояние мира (нет консенсуса среди реализаций и нет консенсуса в CSSWG). Намерение CSSWG заключается в том, чтобы браузеры сошлись на одном из вариантов поведения, после чего в спецификацию будут внесены поправки, требующие этого.

Авторам следует полностью избегать использования процентов в отступах или полях элементов сетки, поскольку они будут вести себя по-разному в разных браузерах.

Автоматические поля расширяются, чтобы заполнить дополнительное пространство в соответствующем измерении, и поэтому могут использоваться для выравнивания.

Flexbox, еще одна технология CSS3, имеет такую ​​же проблему.

Вот как я реализовал трюк с отступом снизу для видео, вложенного в контейнер flex (см. последний пункт): https://stackoverflow.com/a/39310591/3597276

person Michael Benjamin    schedule 10.03.2017
comment
Значит ли это, что невозможно создать сетку ячеек с заданным соотношением? - person Ploppy; 10.03.2017
comment
Это означает, что на данный момент вам следует забыть об использовании процентного заполнения или полей для элементов сетки, если вы хотите, чтобы ваш макет работал в разных браузерах. - person Michael Benjamin; 10.03.2017
comment
Странно то, что, судя по комментариям к вопросу, он, по-видимому, работал на FF 51. - person Ploppy; 10.03.2017
comment
Основная проблема, согласно спецификации, не в том, что это работает или не работает. Дело в том, что реализация несовместима в разных браузерах. - person Michael Benjamin; 10.03.2017
comment
Это сложнее, я хочу конкретное соотношение с динамическим размером, вот как это выглядит codepen.io /anon/pen/xqgrqj . Но единственный способ, который я знаю, чтобы зарезервировать область изображения во время его загрузки, - это использовать трюк нижнего заполнения в его контейнере и поместить изображение в абсолютное положение внутри него. - person Ploppy; 10.03.2017
comment
Традиционный способ резервирования места для изображения во время загрузки страницы — использование атрибутов width и height в теге img. stackoverflow.com/q/32217863/3597276 - person Michael Benjamin; 10.03.2017
comment
Вы никогда не получите адаптивный дизайн, если будете использовать статическую ширину и высоту. - person Ploppy; 10.03.2017
comment
Ссылка, которую я разместил в своем последнем комментарии, охватывает это. Существует несколько мнений по этому вопросу. Я не думаю, что никогда правильно. Но что еще более важно, вы не можете использовать процентное заполнение для элементов сетки. Конец истории. Так что взгляните на мои другие ответы и ссылки на некоторые варианты. - person Michael Benjamin; 10.03.2017
comment
Макет сетки совершенно новый. Едва из коробки. Не могу сделать все (пока). - person Michael Benjamin; 10.03.2017
comment
Хотя то, что вы говорите, вероятно, верно, это невозможно сделать прямо сейчас. Я оставлю вопрос открытым на некоторое время, чтобы посмотреть, придет ли кто-нибудь с решением этой непоследовательной реализации в разных браузерах. - person Ploppy; 10.03.2017
comment
Да. Я согласен. Вы обязательно должны оставить вопрос открытым, так как кто-то может знать хороший обходной путь. - person Michael Benjamin; 10.03.2017

arrow_upward
0
arrow_downward

Я нашел решение: мне пришлось добавить обертку к ячейке с правилом «ширина: 100%», и это, наконец, работает в Firefox 52!

#grid{
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 100px 100px;
}
.cell{
  width: 100%;
}
.inner{
  background-color: red;
  padding-bottom: 50%;
}
<div id="grid">
  <div class="cell">
    <div class="inner"></div>
  </div>
  <div class="cell">
    <div class="inner"></div>
  </div>
  <div class="cell">
    <div class="inner"></div>
  </div>
  <div class="cell">
    <div class="inner"></div>
  </div>
</div>

Вероятно, это временное решение, которое может быть изменено из-за того, что сетка CSS является совершенно новой.

person Ploppy    schedule 10.03.2017