公司最近在移动版的safari上在做了一个web app如图：

中间是一张比较大的图片，两边各是一按钮。

布局是，大图片水平居中，两个侧边按钮垂直居中。点击侧边按钮时屏幕翻滚并显示下一个页面。

这个布局里面这三个元素位于一个父元素里面，同时父元素相对定位，两个侧边按钮绝对定位，来实现垂直居中。

看似没有任何问题，但是当中间的大图片超出iphone或者ipod可视区域，safari将不对可视区域外的部分进行渲染，

但是位于大图片下面的元素则不会受其影响（不是相对定位的）。

也就是说，如果大图片在竖屏显示正好时，切换到横屏时将只会渲染这张图片的一部分。

经过反复的测试终于发现问题出现在对大图片的父元素使用了相对定位（NND）真是不容易发现啊！

解决方式是不在使用相对定位，这三个元素都是用diaplay: inline-block;然后控制高度和宽度。

总结，尽量不要使用相对定位（包括文字都会有这样的问题）。问题的根本有待深入研究