记IOS兼容性问题

1.iphonex等手机上要想设置页面可滚动，必须给最外层的盒子一个初始的高度，并且要设置-webkit-overflow-scrolling属性，例如
 

.wraper{
    height:100px;
    -webkit-overflow-scrolling: touch;
}

注意这里有一个坑，高度不能用min-height设置，否则会导致页面不能滚动

2.ios上设置padding-bottom属性来撑开高度是没有用的，可以放一个跟padding-bottom等高的盒子来占位

3.去掉ios横向滑动和竖向滑动的滚动条的方法
直接用css去隐藏ios的滚动条是没用的，只能采用溢出隐藏的方式去把滚动条隐藏条，例如隐藏右侧的滚动条，需要两个盒子，分别给父元素和子元素设置如下属性

.father{
    overflow: hidden;
}

.child {
    overflow-x: hidden;
    overflow-y: auto;
    width: 102%;
    height: 100%;
    box-sizing: border-box;
    padding-right: 8px;
}

4.ios设置position:absolute和position:fixed定位，必须同时设置top和left属性才行，否则定位会乱

5.ios上尽量不要设置浮动布局，容易产生兼容性6.ios使用浮动布局的时候，因为z-index的层级问题也会产生奇怪的bug，遇到问题的时候可以往这方面思考
6.遇到有兼容性问题的插件，不要着急，多找找他的使用方法和看看源码，一般比较成熟的插件都会考虑到兼容性问题，出现问题多半是你不会用

欢迎关注「不出户」公众号 

在公众号回复「python」，获取全套python学习资源。

在公众号回复「vue」，领取vue核心教程

在公众号回复「react」，领取react全套教程

在公众号回复「angular」，领取angular学习资源

在公众号回复「算法」，领取算法学习教程

在公众号回复「nodejs」，领取nodejs学习教程，更有更多精品资源敬请期待