iOS中margin无效

之前在用VUE写微信公众号,用的Mint-UI的Loadmore组件的时候,iOS浏览器中的样式不能正常显示,然后发现不只这一个组件有问题,其他使用margin-bottom全都无效。

然后百度了一下资料:

1
2
3
4
5
关于layoutMargins

iOS8后,UIView 有个属性 var layoutMargins: UIEdgeInsets ,用来指定该View的subview同其edge的间距。AutoLayout使用margins来放置内容。 默认的值为8pt。

如果一个View是ViewController的rootview,系统会自动设置和管理margins,top和bottom margins被设置为0pt,left和right的值根据当前的 size class (文末简单介绍一下size class)不同而不同,可能取值为16或者20pt(iPhone6 plus, iPad),你不能修改这些值。

测试

  1. body的height为100%的时候, iOS中的margin-bottom无效
  2. 外层容器DIV用绝对定位(absolute)撑满窗口时,iOS中的margin-bottom无效
  3. div使用固定高度占满窗口时,iOS中的margin-bottom有效

解决方案

  1. 把外层容器撑满窗口的样式去掉
  2. 使用padding-bottom代替margin属性
  3. 用空的div设置height来撑起margin的区域
  4. 使用margin属性的元素,用absolute定位进行布局
坚持原创技术分享,您的支持将鼓励我继续创作!