Flexbox在Chrome瀏覽器中工作，但不支持Mozilla

我有這張表，其中一些內容顯示，flexbox在Chrome中正常工作，但不在Mozilla中。問題是，如果我把內容從表格中刪除，但不是內部。當你調整大小時，它看起來像綠色的div有一個最小寬度（Mozilla）。Flexbox在Chrome瀏覽器中工作，但不支持Mozilla

JSFiddle和代碼：

.s_container { 
 
    margin: auto; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-spacing: 0px; 
 
    overflow: hidden; 
 
    border: none; 
 
    display: -webkit-flex; 
 
    display: -webkit-box; 
 
    display: -moz-flex; 
 
    display: -moz-box; 
 
    display: flex; 
 
    display: -ms-flexbox; 
 
} 
 
.ssm_opcion { 
 
    overflow: hidden; 
 
    position: inherit; 
 
    background: yellow; 
 
} 
 
.ssm_opcion img { 
 
    vertical-align: middle; 
 
    width: auto; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
#text_opcion { 
 
    width: 100%; 
 
    display: -webkit-flex; 
 
    display: -webkit-box; 
 
    display: -moz-flex; 
 
    display: -moz-box; 
 
    display: flex; 
 
    display: -ms-flexbox; 
 
    -webkit-box-flex: 1; 
 
    -moz-box-flex: auto; 
 
    -webkit-flex: auto; 
 
    -ms-flex: auto; 
 
    flex: auto; 
 
    background: green; 
 
} 
 
.test { 
 
    width: 100%; 
 
} 
 
.ti-ar-d { 
 
    justify-content: flex-end; 
 
    /*-- horizontal --*/ 
 
    align-items: flex-start; 
 
    /*-- vertical --*/ 
 
    -webkit-justify-content: flex-end; 
 
    /*-- horizontal --*/ 
 
    -webkit-align-items: flex-start; 
 
    /*-- vertical --*/ 
 
    -webkit-box-pack: end; 
 
    /*-- horizontal --*/ 
 
    -webkit-box-align: start; 
 
    /*-- vertical --*/ 
 
    text-align: right; 
 
}

<table class="test"> 
 
    <tr> 
 
    <td> 
 
     <div class="s_container"> 
 
     <div id="text_opcion" class="ti-me-d"> 
 
      <label for="test"> 
 
      <p>Prueba</p> 
 
      </label> 
 
     </div> 
 

 
     <div class="ssm_opcion"> 
 
      <center> 
 
      <img src="images/opciones/mostaza.png"> 
 
      </center> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2016-01-21 Polo

並排側火狐（左）和Chrome瀏覽：HTTP：// imgur .COM/SuLyRmA。問題在哪裏？ –

當我在Mozilla中調整大小時不會像在Chrome中那樣工作。這就像在Mozilla中綠色的div將有一個最小寬度。 – Polo

請加入，然後請在您的問題中說明*問題在調整大小時可見。它節省了每個人的時間。 –

這是不相關的Flexbox的，而是使用了<table>的。

您需要添加此規則，以避免你的形象打破錶佈局：

.test { 
    table-layout: fixed; 
}

Updated fiddle

來源

2016-01-21 14:21:29 zessx

你的小提琴出了點問題（CSS已被normalize.css樣板代替），但答案本身似乎工作。（我完全不明白它爲什麼會起作用，但如果你能解釋它會非常有用） –

@DanielBeck糟糕，我的壞（鏈接已更新）。我首先嚐試添加normalize來檢查某些內容，並忘記將其刪除，但問題依然存在。 Chrome和Firefox沒有相同的方式來計算如何渲染表格佈局（列寬），而'table-layout：fixed'避免了大部分這些計算。 – zessx

Flexbox在Chrome瀏覽器中工作，但不支持Mozilla

回答

相關問題