昨天发现一个大问题，项目的UI开发接近尾声了，测试低版本的Safari浏览器上，flex布局有问题。具体表现是：
css
.flex {
display: inline-flex;
justify-content: center;
align-items: center;
position: absolute;
width: 80px;
height: 36px;
}
.bg {
position: absolute;
background-color: green;
width: 100%;
height: 100%;
}
html
<div class="flex">
<div class="bg"></div>
<span style="position:absolute;">按钮</span>
</div>
如果在Chrome或是高版本的Safari上，这两个绝对定位的元素是居于盒子的正中央的。
而实际上是
Chrome显示效果
低版本Safari 显示效果
查了半天文档，发现
As it is out-of-flow, an absolutely-positioned child of a flex containe does not participate in flex layout. (https://www.w3.org/TR/css-flexbox-1/#abspos-items)
absolute定位的元素不参与flex的布局，虽然有的浏览器允许这样写。当然也可以预见的是，不久的将来，我们可以这样用而不用考虑兼容问题。
不过，relative不受影响
