1

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

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

Chrome 和 Internet Explorer（恕我直言预期行为）

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 会以不同的方式呈现。

4

1 回答 1

1

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

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

  1. 在绝对定位的元素上设置宽度
  2. 如果你不需要支持< IE 10 或opera mini，你可以使用flexbox代替媒体对象
  3. 如果您只是不希望文本被截断，您可以对用于媒体主体的媒体对象使用较新的OOCSS 方法。display: table-cell需要注意的是，您的媒体对象基本上会占用尽可能多的空间，因为它的行为就像一个表格单元格，这可能不是您所追求的。
于 2014-11-06T19:39:18.097 回答