如何使 flex box 在 safari 中工作？

Posted 2023-03-04

技术标签:

【中文标题】如何使 flex box 在 safari 中工作？【英文标题】：How do I make flex box work in safari? 【发布时间】：2014-09-14 00:21:57 【问题描述】：

如何使弹性框在 Safari 中工作？我有一个响应式导航，它使用 CSS 弹性框来响应并且由于某种原因，它在 Safari 中不起作用。

这是我的代码：

#menu 
	clear: both;
	height: auto;
	font-family: Arial, Tahoma, Verdana;
	font-size: 1em;
	/*padding:10px;*/
	margin: 5px;
	display: -webkit-box; /* OLD - ios 6-, Safari 3.1-6 */
	display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
	justify-content: center;
	-webkit-box-align: center;
	-webkit-flex-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;fffff
	font-style: normal;
	font-weight: 400px;

#menu a:link 
	display: inline-block;
	width: 100px;
	height: 50px;
	padding: 5px;
	background-color: yellow;
	/*border: 1px solid #cccccc;*/
	margin: 5px;
	display: flex;
	flex-grow: 1;
	align-items: center;
	text-align: center;
	justify-content: center;
	font-weight: bold;
	color: #1689D6;
	font-size: 85%;

#menu a:visited 
	display: inline-block;
	width: 100px;
	height: 50px;
	padding: 5px;
	background-color: yellow;
	/*border: 1px solid #cccccc;*/
	margin: 5px;
	display: flex;
	flex-grow: 1;
	align-items: center;
	text-align: center;
	justify-content: center;
	font-weight: bold;
	color: #1689D6;
	font-size: 85%;

#menu a:hover 
	display: inline-block;
	color: #fff;
	width: 100px;
	height: 50px;
	padding: 5px;
	background-color: red;
	/*border: 1px solid #cccccc;*/
	margin: 5px;
	display: flex;
	flex-grow: 1;
	align-items: center;
	text-align: center;
	justify-content: center;
	font-weight: bold;
	font-size: 85%;

#menu a:active 
	display: inline-block;
	color: #fff;
	width: 100px;
	height: 50px;
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 5px;
	background-color: red;
	/*border: 1px solid #cccccc;*/
	margin: 5px;
	display: flex;
	flex-grow: 1;
	align-items: center;
	text-align: center;
	justify-content: center;
	font-style: normal;
	font-weight: bold;
	font-size: 85%;

<nav id="menu">
  <a href="#">Philadelphia</a>
  <!--<a href="#">Vacation Packages</a>-->
  <a href="#">United States of America</a>
  <a href="#">Philippines</a>
  <a href="#">Long Destinations Names</a>
  <a href="#">Some Destination</a>
  <a href="#">Australia</a>
</nav>

http://jsfiddle.net/cyberjo50/n55xh/3/

我是否缺少前缀使其在 Safari 中工作？

【问题讨论】：

您使用的是什么版本的 Safari？为什么它也不工作，它有什么不同？你提供的信息越多越好:) 【参考方案1】：

给 flex 一个值解决了我的问题，例如

flex: 1 0 auto

【讨论】：

2020 年 3 月为我工作。在我的情况下，flex: 0; 将 0 高度赋予了 div。我将其替换为 flex: 0 0 auto 并且有效。我记得这是一个已知的错误，但我没有在网上找到任何参考这需要更多的支持，并被接受为答案，因为有太多帖子提出了不相关的解决方案。 2020 年 10 月，这仍然是一回事。谢谢。这是从 2021 年 2 月开始的正确且有效的修复。为我工作 - 2021 年 5 月。【参考方案2】：

我必须为 safari 添加 webkit 前缀（但 flex 不是 flexbox）：

display:-webkit-flex

【讨论】：

OP 有 display: -webkit-flex 已经，我不明白这是如何回答问题的。使用-webkit-flexbox 而不是webkit-flex。也使用默认的弹性。像这样display: flex; display: -webkit-flexbox;【参考方案3】：

试试这个

display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */

这对我有用

【讨论】：

【参考方案4】：

试试这个：

select 
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -ms-flexbox;

【讨论】：

【参考方案5】：

试试-webkit-flexbox。它适用于野生动物园。 webkit-flex safari 不接受。

【讨论】：

这个答案宽泛而令人困惑，请考虑修改。我的意思是 safari 将采用 -webkit-flexbox 而不是 -webkit-flex。 display: flex; display: -webkit-flexbox; 这有帮助，谢谢。【参考方案6】：

当您将菜单项的显示值从display: inline-block; 设置为display: block; 时，它可以工作

在此处查看更新后的代码：

#menu 
    clear: both;
    height: auto;
    font-family: Arial, Tahoma, Verdana;
    font-size: 1em;
    /*padding:10px;*/
    margin: 5px;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
    justify-content: center;
    -webkit-box-align: center;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;fffff
    font-style: normal;
    font-weight: 400px;


#menu a:link 
    display: block; //here you need to change the display property
    width: 100px;
    height: 50px;
    padding: 5px;
    background-color: yellow;
    /*border: 1px solid #cccccc;*/
    margin: 5px;
    display: flex;
    flex-grow: 1;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-weight: bold;
    color: #1689D6;
    font-size: 85%;

#menu a:visited 
    //no display property here                                                                       
    width: 100px;
    height: 50px;
    padding: 5px;
    background-color: yellow;
    /*border: 1px solid #cccccc;*/
    margin: 5px;
    display: flex;
    flex-grow: 1;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-weight: bold;
    color: #1689D6;
    font-size: 85%;

#menu a:hover 
    //no display property here                                                                               
    color: #fff;
    width: 100px;
    height: 50px;
    padding: 5px;
    background-color: red;
    /*border: 1px solid #cccccc;*/
    margin: 5px;
    display: flex;
    flex-grow: 1;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-weight: bold;
    font-size: 85%;

#menu a:active 
    //no display property here                                                                               
    color: #fff;
    width: 100px;
    height: 50px;
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    background-color: red;
    /*border: 1px solid #cccccc;*/
    margin: 5px;
    display: flex;
    flex-grow: 1;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-style: normal;
    font-weight: bold;
    font-size: 85%;

【讨论】：

【参考方案7】：

也许这会有用

-webkit-justify-content: space-around;

【讨论】：

【参考方案8】：

演示 -> https://jsfiddle.net/xdsuozxf/

Safari 仍然需要 -webkit- 前缀才能使用 flexbox。

.row
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;


.col 
    background:red;
    border:1px solid black;

    -webkit-flex: 1 ;-ms-flex: 1 ;flex: 1 ;

<div class="wrapper">
      
    <div class="content">
        <div class="row">
            <div class="col medium">
                <div class="box">
                    work on safari browser 
                </div>
            </div>
            <div class="col medium">
                <div class="box">
                    work on safari browser 
                    work on safari browser 
                    work on safari browser 
                    work on safari browser 
                    work on safari browser 
                </div>
            </div>
            <div class="col medium">
                <div class="box">
                    work on safari browser 
                    work on safari browser 
                    work on safari browser 
                    work on safari browser 
                    work on safari browser 
                    work on safari browser  work on safari browser 
                    work on safari browser 
                </div>
            </div>
        </div>   
    </div>
</div>

【讨论】：

你知道 2019 年是否仍然如此吗？【参考方案9】：

display: flex;
display: -webkit-box;

为我做的。来自不同类的同一元素上还有两个display: flex;。所以我删除了另一个。

【讨论】：

【参考方案10】：

我遇到了完全相同的问题，并尝试了上述所有解决方案。最后我用 3 个简单的 Div 进行了测试，发现它没有任何问题。于是得出结论，一定是我孩子的元素有问题，将显示类型改为block，问题就解决了。

.parent 
  display: flex;

    
.child 
  display: block;

【讨论】：

【参考方案11】：

使用自动前缀

display: -webkit-box;
    display: -ms-flexbox;
    display: flex;        
    -webkit-box-pack: center;        
        -ms-flex-pack: center;        
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

试试这个并从代码中删除#ffffff here the image pls check this

【讨论】：

以上是关于如何使 flex box 在 safari 中工作？的主要内容，如果未能解决你的问题，请参考以下文章

样式表不能在 Chrome/Safari 中工作，但可以在 Internet Explorer 中工作

flex-box 中的行换行未在 Safari 中换行

Rails：上传 dropzone、S3、carrierwave，不能在 Safari 中工作，但在 Google Chrome 中工作

如何使 Flex 文件上传在 firefox 和 safari 上工作？

toggleClass 可以在 Safari 中工作吗？ (jQuery)

视频标签现在在 Safari 中不起作用