1

示例页面

Firefox/IE10/Opera，在缩小窗口时，将图像保持在当前大小，根本不进行缩放。

Chrome 是唯一可以按比例缩小所有内容的设备。我不知道 Chrome 是否做错了什么，或者所有其他浏览器都做错了什么，或者如何修复它。

HTML

<section>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
</section>

CSS

section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end;
}

.card {
  margin: 0 5px;
  position: relative;
}
.card img {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  display: block;
  max-height: 100%;
  max-width: 100%;
}
4

1 回答 1

-1

flexbox规范在过去几年中经历了许多变化，各种浏览器实现了不同版本的规范。在这一点上，您不太可能看到很多兼容行为。特别是 IE10 和 Safari 都有旧版本规范的大部分工作实现。Firefox最近实现了支持，但默认情况下未启用。

特别要注意的是，flexbox 的原始设计基于 XUL 的 Mozilla CSS 扩展，用于分配空白空间，而不是重新调整已经具有固有大小的元素的大小。因此，可能无法在所有浏览器中实现您的目标。

如果您仍然对在flexbox真实网站中使用感兴趣，请查看Modernizr，特别是flexbox和flexboxlegacy的测试，您几乎肯定会最终为这两种情况编写一组规则。

以下是我安装的浏览器中的一些截图：

火狐 21： Firefox 21 中的 Flexbox 示例

火狐 22： Firefox 22 中的 Flexbox 示例

铬 28： Chrome 28 中的 Flexbox 示例

歌剧 15： 在此处输入图像描述

鉴于最新版本的 Firefox 和 Opera 看起来与 Chrome 相同，我认为根据规范的当前状态，这是正确的行为。因此，其他浏览器做错了。至于你能做些什么，除了我上面已经说过的以外，我想说的不多 - 使用基于旧浏览器中检测到的支持的替代方法。

于 2013-06-03T22:59:42.033 回答