Question

我在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中查看问题。

真的很感激这里的一些意见，我只是想不出来！

谢谢！

Answer 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来说相对较新，不同的浏览器可能会以不同方式解释弹性属性（请参阅here和here以及here）。

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

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

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

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

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

另外，请记住，在创建Flexbox时，子项（但不是其他后代）将成为弹性项。因此，除非您需要，否则请移除包裹图像的div。

考虑改变这个：

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

就这样：

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

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

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

因此，您调整后的HTML将如下所示：

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

Answer 2

我遇到了同样的问题。调整图像的高度使其固定。就我而言，我将高度设置为150px。

Flexbox在Safari中无法正确查看图像

2 个答案: