H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【CSS】父div设置overflow-y:auto的属性,在它里面的div的box-shadow属性左右两边显示不出来

关于css样式的问题,父div设置overflow-y:auto的属性,在它里面的div的box-shadow属性左右两边显示不出来
代码如下:

<div id="box">
    <div class="test">    
        1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。        
    </div>
</div>
#box{
    margin: 50px;
    overflow-y: auto;
}
.test{
    margin-top: 1px;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.12), 
                0px 1px 1px 0px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

回答:

.test {
    margin: 1px 1px 2px;
    ...
}

回答:

给父元素设置box-shadow偏移大小的padding

回答:

以前没有遇到过这个问题,我实验了一下,觉得原因应该是:

  1. 父级容器上设置overflow、overflow-y和overflow-x属性不为visible时,会触发一次容器宽高计算并裁剪
  2. box-shadow属性不会影响元素的宽高,所以被overflow忽略,然后裁剪
  3. 由于设置了overflow,父级元素触发BFC,没有上外边距合并,所以能够显示上边的box-shadow

事实上,overflow不为visible与触发BFC的条件很像,但不清楚是不是BFC的原因。

以上都是在chrome浏览器中发现的情况,因此可以试试上面两位的解决方法。

但是

但是,如果你是在IE9浏览器中,那么仅仅是1px的margin是没有办法完整显示box-shadow的,至少得是2px。

本文地址:H5W3 » 【CSS】父div设置overflow-y:auto的属性,在它里面的div的box-shadow属性左右两边显示不出来

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址