写在前面: 目前团队的项目是开发一个HybridApp混合app,这样做的好处是只需一个前端就能完成一个App移动端多处终端(安卓,ios,pad,微信等)内容的开发,生了很多人力物力,但是在开发的过程中发现ios端对某些html,css和js属性会有兼容问题,当遇到这些问题并且解决后,就来简书写一些博客来总结这些问题,也希望对遇到同样问题的同学有所帮助
问题描述:position:fixed在android2.2以下(不包含2.2),ios是无效的,而position:absolute是没有问题的,如果用动画去解决,使用到css的transform的话,input,select等编辑框不会移动,还是在原来的位置上,所以建议在写移动端的时候想要固定某个div避免使用position:fixed属性,如果想要用动画去模拟也要注意css3新属性兼容问题,所以建议这时使用position:absolute属性去模拟固定某个div。
解决方案:
image.png固定图中红色方框时间选择器,只需写一下几行css即可:
.calendar-choice {
width: 100%;
position: absolute;
overflow-y: auto;
z-index: 9999999;
-webkit-overflow-scrolling: touch;
}
其实这里z-index属性起到比较关键的左右,当使用 position: absolute固定div是不要忘了加上z-index属性
网友评论