柔性盒在Safari中不工作

Question

这太令人沮丧了。我已经尝试了数十个“修复”，我希望有人能够提供帮助。我有一个在Chrome和IE中运行良好的Flexbox，但不支持Safari（iOS和桌面）。

的CSS：

.resulist40 { 
    list-style: none; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    float:clear; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
     -ms-flex-direction: column; 
      flex-direction: column; 
    -ms-flex-wrap: wrap; 
     flex-wrap: wrap; 
    height: 350px; 
    width: initial; 

} 
.reslist40 { 
    -webkit-box-flex: 1; 
     -ms-flex: 1; 
      flex: 1; 
    min-height: 34px; 
} 

的HTML：

<ul class="resulist40"> 
      <li class="reslist40"> 
       <a onclick="dovid(1);">Day 1</a> 
      </li> 
      <li class="reslist40"> 
      </li>... 
</ul> 

这里是所需的外观（从Chrome中）：

下面是它看起来像在Safari：

Answer 1

这是我的修复，我不是100％高兴。看起来Safari没有固定的宽度工作，所以Flexbox没有真正的响应。我发现130px的宽度在所有浏览器上都有3列。

.resulist40 { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
     -ms-flex-direction: row; 
      flex-direction: row; 
    -ms-flex-wrap: wrap; 
     flex-wrap: wrap; 
    width: 100%; 
    padding-left: 10px; 
} 
.reslist40 { 
    list-style: none; 
    display: inline-block; 
    width: 130px; 
    height: 34px; 
    text-align: left; 
}