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

这是我的修复，我不是百分之百。如果没有固定的宽度，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;
}

Answer 2

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

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

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

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

这让 Safari 再次开心起来。

Flex-box无法在Safari中运行

2 个答案: