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

回答

相关问题