flexbox中的图像在Safari浏览器中无法正确查看

我在Safari中遇到flexbox问题，无法在这些页面上找到适用于我的解决方案。flexbox中的图像在Safari浏览器中无法正确查看

在我的页面上，我已经使用了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铬。

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

真的很感谢这里的一些输入，我只是无法弄清楚！

谢谢！

来源

2015-10-05 simenkl

修订答

首先，尝试前缀所有的代码，以便它与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中的代码的主要问题是图像的大小以及您在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时，孩子（但不是其他后代）会成为弹性项目。所以除非你需要它，否则去掉包装图像的div。

考虑更改此：

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

为了眼前这个：

删除此 div的

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

一个好处是，你可以再申请柔性特性直接向img（而不必使div嵌套的柔性容器）。

包装文本的第二个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>

来源

2015-10-06 12:35:10

flexbox中的图像在Safari浏览器中无法正确查看

回答

相关问题