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瀏覽器中無法正確查看

回答

相關問題