带有图像的 flexbox 在 Safari 中无法正确查看

Posted 2023-03-05

【中文标题】带有图像的 flexbox 在 Safari 中无法正确查看

【英文标题】：flexbox with images not viewing correctly in safari

【发布时间】：2016-01-01 22:22:27

【问题描述】：

我在 Safari 中遇到了 flexbox 问题，我在这些页面上找不到适合我的解决方案。

在我的页面上，我使用了 flexbox 并将文本放在一列中，将图片放在另一列中。它在 Chrome 和 Internet Explorer 中完美显示，但在 Safari 中图像缩小并变得非常小或错位。

CSS 代码：

.flexbox       
  display: -webkit-flex; /* Safari */
    -webkit-align-items: center;  /* safari */ 
  -webkit-justify-content: center; /* safari */
  display: -ms-flexbox;     
  display: flex;
  overflow: hidden;
  flex-wrap: nowrap;

.flexbox .col 
  flex: 1; 
  padding: 20px;

.flexbox .col:nth-child(1)  
  /* background: #ccc;  */
  -webkit-order: 1; 
      -ms-flex-order: 1; 
          order: 1;

.flexbox .col:nth-child(2)  
  /* background: #eee; */
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;

.flexbox .col:nth-child(3)  
  /* background: #eee; */
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;

html：

<div class="flexbox">
  <div class="col">
  <img src="image url">
  </div>
  <div class="col">
    contents of column 2 
  </div>
</div>

我尝试在 CSS 中分别将 flexbox-shrink: 0; 和 flex: 1 0 auto; 添加到 .flexbox 和 .col 中，但除了在 chrome 中引起问题之外没有任何效果。

我在这里做了一个代码笔：http://codepen.io/anon/pen/meWZgW。在 chrome/firefox 或类似工具中打开它，然后在 safari 中查看问题。

非常感谢这里的一些输入，我只是想不通！

谢谢！

【参考方案1】：

修改后的答案

首先，尝试为所有代码添加前缀，使其与 Safari 兼容。 （如果这不起作用，请在下面考虑我的原始答案。）

您可能需要一个 -webkit 前缀来使用此规则：

.flexbox .col 
    flex: 1; 
    padding: 20px;

试试这个：

.flexbox .col 
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1; 
   padding: 20px;

如需快速添加所需的所有前缀，请在此处的左侧面板中发布您的 CSS：Autoprefixer。

flexbox浏览器支持数据见这里：http://caniuse.com/#search=flex

---

原答案

Flexbox 对于 CSS 来说相对较新，不同的浏览器可能会以不同的方式解释 flex 属性（请参阅 here 和 here 和 here）。

您在 Safari 中的代码的主要问题是图像的大小以及您在 flexbox 类中应用的 overflow: hidden。

是的，Chrome 和 IE 平均分配空间并在一个视图中显示文本和图像。

但是，Safari 以不同的方式分配空间，导致图像被overflow: hidden 规则剪切和隐藏。

解决此问题的一种方法是将overflow: hidden 更改为overflow: auto。 http://codepen.io/anon/pen/RWVgER

另一种选择是调整图像的高度和宽度。目前，它正在渲染其自然尺寸。但是通过调整 HTML 中的大小，使用 height 和 width 属性，或 CSS，使用 height 和 width 属性，它可能更适合。

另外，请记住，当您创建 flexbox 时，子项（而不是其他后代）将成为 flex 项。所以除非你需要它，否则请删除包裹图像的div。

考虑改变这个：

<div class="col">
    <img src=" https://i.guim.co.uk/img/...">
</div>

仅此：

<img class="col" src="https://i.guim.co.uk/img/..."   alt ="">

删除此div 的一个好处是，您可以将弹性属性直接应用于img（无需将div 设为嵌套弹性容器）。

包裹文本的第二个div class="col" 可以保持原样。

所以您调整后的 HTML 将如下所示：

<div class="flexbox">
    <img class="col" src="https://i.guim.co.uk/img/..."   alt ="">
    <div class="col">contents of column 2 contents of column 2... </div>
</div>

【参考方案2】：

我遇到了同样的问题。调整图像的高度使其修复。在我的例子中，我将高度设置为 150 像素。