父子元素高度问题 踩坑

1、父子元素高宽问题

div.container {
  text-align: center;
  margin: 30px 0 50px;
  &>img {
    width: 350px;
    margin: 0 -30px;
  }
}

<div class="container">
  <img src="">
  <div>我是描述信息</div>
</div>

未指定父元素宽度，指定子元素宽度后，chrome下父元素div的宽度等于子元素宽度撑起的宽度。Safari 9下div宽度没有拿到，为0。导致父元素内部的img和div被挤压。