媒体对象和位置：绝对

Question

我正在尝试重新创建 OOCSS media object 以便在某些文本旁边显示图像。媒体对象使用overflow: hidden 创建一个新的块格式化上下文。这样可以确保文本不会环绕图像。

但是，当我的媒体对象绝对定位时，Firefox 呈现的文本与 Chrome 和 Internet Explorer 不同。 Firefox 似乎只根据文本的宽度而不是图像的宽度和文本的宽度来确定媒体框的宽度。

Chrome 和 Internet Explorer（恕我直言）

火狐

.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. 如果不需要support < IE 10 or opera mini，可以use flexbox instead的媒体对象
3. 如果您不希望文本被截断，您可以使用较新的OOCSS method for media objects，它使用display: table-cell 作为媒体正文。需要注意的是，您的媒体对象基本上会占用尽可能多的空间，因为它的行为类似于表格单元格，这可能不是您想要的。