Loading...
墨滴

lanrri

2021/08/03  阅读:27  主题:全栈蓝

项目中遇到的问题

CSS

flex 兼容性问题

  1. flex 布局里 img 设置height: 100%;会出现 item 宽度为 img 图片真实宽度问题 链接
.item-box {
  display: flex;
  flex-direction: column;
}
.img-box {
  height50px;
}
.img {
/*     height: 50px; */
  height100%;
}

解决方法:img 设置固定高度


flex center 设置居中 兼容性问题

flex 布局里 父元素设置了 flex 居中后,子元素设置绝对定位后,margin-top 设置负数,在低版本的浏览器里会出现兼容性问题,Chrome 72版本出现

.item-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-img {
  position: absolute;
  margin-top: -20px;
}

解决方法:子元素使用 top 来代替 margin-top


lanrri

2021/08/03  阅读:27  主题:全栈蓝

作者介绍

lanrri