css - 媒体对象和位置 : absolute

Question

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

但是，当我的媒体对象绝对定位时，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

绝对定位元素从正常文档流中移除，因此它们不会像常规静态 block 级元素那样填充 100% 的父元素。相反，它们依赖于它们的内容宽度或指定的宽度。 Firefox 应用内容宽度的方式似乎与 Chrome 或 IE 略有不同，这就是它看起来被截断的原因。

不确定您的用例或您支持的浏览器，但您有几个选择:

1. 设置绝对定位元素的宽度
2. 如果你不需要support < IE 10 or opera mini , 你可以 use flexbox instead媒体对象
3. 如果您只是不想截断文本，您可以使用较新的 OOCSS method for media objects它使用 display: table-cell 作为媒体主体。需要注意的是，您的媒体对象基本上会占用尽可能多的空间，因为它的行为类似于表格单元格，这可能不是您想要的。