Flex-box 在 Safari 中不起作用答案

【问题标题】：Flex-box not working in SafariFlex-box 在 Safari 中不起作用
【发布时间】：2016-12-30 13:53:58
【问题描述】：

这太令人沮丧了。我已经尝试了几十个“修复”，希望有人能提供帮助。我有一个在 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 中的样子：

【问题讨论】：

投反对票，但没有 cmets？我没有提供什么？

标签： html css safari flexbox

【解决方案1】：

当我挖掘这篇文章时，不要介意我。
我也有类似的最近不幸，但就我而言，我有......

img {
   height: auto;
   width: 100%;
}

而 Safari 没有它。所以我把它改成了……

img {
   height: 100%;
   width: 100%;
}

这让 Safari 又开心起来了。

【讨论】：

【解决方案2】：

这是我的解决办法，我不是 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;
}

【讨论】：