p元素中嵌套img标签引起的兼容性问题

综述：在6.0项目中，发现一个盒子和大多数盒子在页面排布上都不相同，图中表示上升下降的横线在该盒子上一直在p元素顶部，但是在大多数盒子上都是在底部，在布局的时候就不能做到两者的兼容；

1.最终的想法是，在两个盒子上，img标签的父亲元素的布局是表现一致的，如果其父亲元素是relative的，然后img标签相对于父亲元素来布局，不是就能将问题解决吗？实现代码如下：

  /*父亲元素*/
#monthList  p{
    position:relative;
    left:0;
    top:0;
    width:457px;
    height:51px;
    margin:0;
    color:#FFFFFF;
    font-size: 22px;
    vertical-align: middle;
}

/*子元素img*/
.middleImg{
    box-sizing:content-box;  
    position:absolute;
    left:410px;
    bottom:15px;
    margin:0;
    width:20px;
    height:22px;
    display: inline;
}

核心思想：position:absolute是以就近的父元素(如果父元素没定位,就以爷爷作为参考点),做偏移的

2.三大定位参考点回顾

相对定位:相对于自己原来的位置(以自己原来的位置为参考点),做偏移
绝对定位:以最近的定位父元素(如果父元素没定位,就以爷爷作为参考点),做偏移的
固定定位:始终以电脑屏幕的左上角为参考点

p元素中嵌套img标签引起的兼容性问题

猜你喜欢