Safari iOS 8.3 - 环绕空间不起作用答案

【问题标题】：Safari iOS 8.3 - space-around not workingSafari iOS 8.3 - 环绕空间不起作用
【发布时间】：2018-04-16 03:38:38
【问题描述】：

我有一个简单的 CSS 和 HTML 结构，它在 iOS 8.3 上无法正常工作，iOS 8.3 上的属性 justify-content: space-around; 在 safari 上。我尝试了另一台最新版本的 iPad，它显示得很好。

.backgrounds {
    height: 13.5vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}
.backgrounds img {
    width: 10vh;
    height: 10vh;
}

<div class="backgrounds">
    <img src="http://via.placeholder.com/350x150" data-bkg="plains-bkg">
    <img src="http://via.placeholder.com/350x150" data-bkg="island-bkg">
    <img src="http://via.placeholder.com/350x150" data-bkg="mountain-bkg">
    <img src="http://via.placeholder.com/350x150" data-bkg="forest-bkg">
    <img src="http://via.placeholder.com/350x150" data-bkg="swamp-bkg">
</div>

在带有 iOS 8.3 的 Safari 中，图像居中对齐，这很好，但它没有应用空格规则。我尝试过使用空格，并且该属性确实应用了它。

这个问题有什么解决方法吗？前缀已通过 gulp 的自动前缀构建添加。

【问题讨论】：

可能您的 Safari 版本太旧，无法支持您的 CSS 属性
@TimGerhard 也许是这样，也许没有真正的解决方案来解决它
有时，当img 元素是一个弹性项目时，它的表现并不好。如果要包装它们，这在 IOS 8.3 中有效吗？ ...jsfiddle.net/c1Lh4qef ...如果这项工作我可以将其发布为答案
让我检查一下@LGSon
@LGSon 什么都没有，我将每个图像都包装到一个 div 中，并且在空间周围什么也不做，就像你的小提琴一样

标签： ios css safari flexbox

【解决方案1】：

你为什么不给图像留出边距？

.backgrounds img {
    width: 10vh;
    height: 10vh;
    margin-left:40px;
    margin-right:40px;
}

我只是粗略地猜到了 40 像素，但如果你随意摆弄你应该会找到适合你的值。

【讨论】：

好吧，padding 不能，它会缩小图像，但是有 margin 可以起到一点作用，但是你必须小心不要破坏其他操作系统中的其他视图。跨度>
边距应该没问题
是的，在这种情况下它可能很“容易”，因为我知道有 5 张图像并且我知道要应用什么 vw 边距，但在其他情况下，如果你应用任意边距，这可能是一个彩票.更改边距的填充，我会赞成它，而不是作为“解决方案”，因为它确实不是一个。但是感谢您的拍摄！
我改了。我仍然不明白为什么你的方式不起作用。我在 caniuse.com 上查了一下，应该没问题。
我有两台 iPad，其中一台的 iOS 比另一台好，我想是 safari aswel。一个很好地渲染了周围的空间，而另一个则没有。无论如何，我可能无法在某些较旧的浏览器中使用该属性。