Question

我一直在一个网站上工作，现在我得到的反馈是它看起来不应该如此。我使用的是flexbox，问题出在Safari 10中。我知道这是一个旧的浏览器，但是根据http://caniuse.com/#search=flex，应该支持它。

问题出现在下一页https://hollandcircularhotspot.nl/en/cases

我已经在整个堆栈溢出中搜索了答案。我想我使用的前缀正确，没有使用最小宽度（这是一个已知问题）。

该问题仅在Safari 10（据我所知）上出现

这是野生动物园10 https://imgur.com/a/pl8WvUP的样子这就是应该看起来像https://imgur.com/a/1SngHot

的样子

Answer 1

如果您使用的是flexbox，则可以在父div上使用justify-content:，然后删除所有似乎引起问题的媒体查询。

Answer 2

尝试将最大宽度更改为宽度

.blocks-links .block-link, .blocks-links .block-link-big {
    color: #6F6F6F;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 21rem;
    /*max-width: 21rem;*/
    background-color: #fff;
    -webkit-box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.16);
    margin-bottom: 3rem;
    margin-right: 5rem;
}

Answer 3

尝试这个

wrapper {
 display: flex;
 justify-content: center;
 text-align: center;
}

如何使Flexbox在Safari 10中正常工作

3 个答案: