媒体对象＆amp;位置：绝对

Question

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

然而，当我的媒体对象被定位时，Firefox会使文本与Chrome和Internet Explorer不同。 Firefox似乎仅将媒体框的宽度基于文本的宽度，而不是图像的宽度和文本的宽度。

Chrome和Internet Explorer（imho预期行为）

火狐

.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使用{{1}}作为媒体。这有一个警告，你的媒体对象基本上占用了尽可能多的空间，因为它的行为就像一个表格单元格，这可能不是你所追求的。