Медиа объект и позиция: абсолют

Question

Я пытаюсь воссоздать объект мультимедиа OOCSS, чтобы показать изображение рядом с текстом. Медиа-объект использует overflow: hidden создать новый контекст форматирования блока. Это гарантирует, что текст не будет обтекать изображение.

Однако, когда мой медиа-объект расположен абсолютно, Firefox отображает текст, отличный от Chrome и Internet Explorer. Похоже, что Firefox основывает ширину медиа-бокса исключительно на ширине текста, а не на ширине изображения и ширине текста.

Chrome и Internet Explorer (имхо ожидаемое поведение)

Fire Fox

.media:after {
  content: '';
  display: block;
  clear: both;
}

.media .img {
  float: left;
  margin-right: 8px;
}

.media .img img {
  display: block;
}

.media .bd {
  overflow: hidden;
}

Посмотрите этот codepen для расширенного примера.

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

Answer 1

Абсолютно позиционированные элементы удаляются из обычного потока документов, поэтому они не будут заполнять 100% своих родительских элементов, как обычные статические элементы уровня блока. Вместо этого они полагаются на ширину содержимого или указанную ширину. Firefox, кажется, применяет ширину контента немного по-другому, чем Chrome или IE, поэтому он кажется обрезанным.

Не уверен в вашем сценарии использования или в каких браузерах вы поддерживаете, но у вас есть несколько вариантов:

1. Установите ширину абсолютно позиционированного элемента
2. Если вам не требуется поддержка , вы можете использовать flexbox вместо медиа-объекта
3. Если вы просто не хотите обрезать текст, вы можете использовать более новый метод OOCSS для медиа-объектов, который использует display: table-cell для тела СМИ. Это предостережение о том, что ваш медиа-объект в основном занимает столько места, сколько может, поскольку он ведет себя как ячейка таблицы, что может не соответствовать вашим целям.