简单来说,Safari真的不支持flexbox吗?
我最近在 flexbox 中建立了一个网站,我发现它的响应非常好,然后我突然读到了一些关于 Safari 的东西。所以,我检查了一下,现在我使用 flex-wrap 包装的所有东西在 Safari 中都没有失败。
我也在通过 node.js 使用“Autoprefixer”,但它仍然不起作用。
我只是想知道它是否有效。
谢谢。
编辑 @cske、@Michael_B 感谢这些链接,但我已经浏览了这两个页面以及更多页面。
@泰勒;是的,我使用了 Autoprefixer so -webkit 并且正在使用所有其他前缀,但它仍然不起作用。
但是,我知道这种认识看起来有多么愚蠢,但 Windows 版 Safari 与 OSX 版 Safari 完全不同? (或者现在 Mac 运行的任何操作系统)是吗?
这是我的问题。我认为。除了是一个彻头彻尾的白痴。我的头埋在这段代码中太久了。
#content {
background: skyblue;
max-width: 995px;
margin: 0 auto;
padding: 0 3%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
width:995px;
}
.content-wrapper {
background: turquoise;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width:25%;
padding-top:1.0em;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.div-inset {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 0 3.676470588235294% 0 3.676470588235294%;
display: block;
}
.product-image {
border: 0.1em solid #CCCCCC;
padding: 5.514705882352941%;
position: relative;
overflow: hidden;
display: block;
}
<section id="content">
<div class="content-wrapper">
<div class="div-inset">
<div class="product-image"><img src="153.jpg"></div>
</div>
</div>
<div class="content-wrapper">
<div class="div-inset">
<div class="product-image"><img src="153.jpg"></div>
</div>
</div>
<div class="content-wrapper">
<div class="div-inset">
<div class="product-image"><img src="153.jpg"></div>
</div>
</div>
<div class="content-wrapper">
<div class="div-inset">
<div class="product-image"><img src="153.jpg"></div>
</div>
</div>
<div class="content-wrapper">
<div class="div-inset">
<div class="product-image"><img src="153.jpg"></div>
</div>
</div>
<div class="content-wrapper">
<div class="div-inset">
<div class="product-image"><img src="153.jpg"></div>
</div>
</div>
<div class="content-wrapper">
<div class="div-inset">
<div class="product-image"><img src="153.jpg"></div>
</div>
</div>
<div class="content-wrapper">
<div class="div-inset">
<div class="product-image"><img src="153.jpg"></div>
</div>
</div>
<div class="content-wrapper">
<div class="div-inset">
<div class="product-image"><img src="153.jpg"></div>
</div>
</div>
</section>
我希望这能让您对我的代码有所了解
EDIT 我觉得真的很蠢,我想我已经厌倦了所有这些哈哈,但我不知道 Windows 版 Safari 已经停产,至少苹果支持是很多年前的事了,所以我使用的 Safari 已经过时好几年了。
这一定是它显示如此糟糕的原因。很抱歉打扰了大家。谢谢。
最佳答案
确保在 flex 属性中包含 -webkit- 前缀; Safari 需要。
除非你的意思是“我用 flex-wrap 包裹的东西都没有失败”,你的问题可以简单地回答 - 是的,它有效。
Safari 的渲染引擎在 Windows/Mac 之间是相同的。如果您有任何未设置样式的表单元素,则默认情况下会继承操作系统的外观。
关于html - Flexbox、Flex Wrap 和 Safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38980969/