iphone5真机，绝对定位的兼容问题
该问题出现的原因已经找到：根本原因就是**absolute定位的元素不参与flex的布局**，详见 当flex容器中包含absolute元素时。
最近在做一个h5页面。其中有个常见商品列表，商品图片布局采用的是
flex+positon:absolute来布局。 在调试器上各型号、真机iphone6及以上展示良好（图1），但在iphone5 的真机测试时会发生图片向右偏移50%的情况（图2）。
图1 - 正常时
图2 - iphone5真机的bug：图片偏移了
一、商品列表布局方式
此处为了做到图片高度100%，所以采用了 .img-box 设置 padding-top：100%， 结合 图片元素img 做 绝对定位 来实现图片的布局。
同时还通过flex布局方式，使得图片在 .img-box 水平居中。
为了让flex布局生效，在图片img上没有做水平方式的平移设置（即没有设置left 和 right数值，这时候它们的数值等价于auto）。
#html
<ul id="productBox">
<li>
<a><div style="padding:5px;">
<div class="img-box">
<img src="https://cdn2.jianshu.io/assets/default_avatar/7-0993d41a595d6ab6ef17b19496eb2f21.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120">
</div>
</div>
<div class="desc">
<p class="now-price">US 28</p>
<span class="old-price">US 56</span>
<span class="off-percent">-50%</span>
</div>
</a>
</li>
</ul>
# css
#product-box .img-box{
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
position: relative;
width: 100%;
padding-top: 100%;
}
#product-box .img-box img{
position: absolute;
height: 100%;
z-index: 2;
top: 0;
}二、图片偏移问题分析
图2的bug展示效果，相当于是对图片img做了向右偏移了50%。
.more-product .img-box img{
left: 50%;
}由此大胆猜测，在iphone5真机环境下，left: auto并没有真的auto了，而是等价于left:50%。
如果商品图片是统一的正方形图，那我们直接给图片img加上样式left: 0;就好了（这样flex居中效果会失效）。但项目中图片还有竖向的长方形图，必须水平居中。
采取了个紧急处理方案是，针对iphone5做了left: 0;，放弃水平居中效果。
/* iphone5 */
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
.more-product .img-box img{
position: absolute;
height: 100%;
z-index: 2;
top: 0;
left: 0;/* iphone5 默认的auto情况实际是偏移50%*/
}
}三、结语
上面只不过是个紧急处理方案，并不是完美解决方案。
目前没有准确定位到问题的所在：
- 是不是只有iphone5会这样？
- iphone4呢？
- 确实是
left: auto的兼容表现形态不同引起的么？ - 具体的兼容分界线在哪里？
- ... 以上都需要进一步探究。 未完待续吧~~~
参考文章：
iphone5媒体查询信息：媒体查询iphone4,5,6以及更高
PSS：在网路上并没有找到多少相关的文章，仅此一篇和iphone5兼容性有点相关，但异常效果不是很类似：绝对定位引起的css样式系统兼容问题