鍍金池/ 問答/HTML5  C++  HTML/ 父div設(shè)置overflow-y：auto的屬性，在它里面的div的box-sh

父div設(shè)置overflow-y：auto的屬性，在它里面的div的box-shadow屬性左右兩邊顯示不出來

關(guān)于css樣式的問題，父div設(shè)置overflow-y：auto的屬性，在它里面的div的box-shadow屬性左右兩邊顯示不出來
代碼如下：

<div id="box">
    <div class="test">    
        1975年二、三月間，一個(gè)平平常常的日子，細(xì)蒙蒙的雨絲夾著一星半點(diǎn)的雪花，正紛紛淋淋地向大地飄灑著。時(shí)令已快到驚蟄，雪當(dāng)然再不會(huì)存留，往往還沒等落地，就已經(jīng)消失得無蹤無影了。黃土高原嚴(yán)寒而漫長(zhǎng)的冬天看來就要過去，但那真正溫暖的春天還遠(yuǎn)遠(yuǎn)地沒有到來。        
    </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;
}
回答
編輯回答
玄鳥

以前沒有遇到過這個(gè)問題，我實(shí)驗(yàn)了一下，覺得原因應(yīng)該是:

  1. 父級(jí)容器上設(shè)置overflow、overflow-y和overflow-x屬性不為visible時(shí)，會(huì)觸發(fā)一次容器寬高計(jì)算并裁剪
  2. box-shadow屬性不會(huì)影響元素的寬高，所以被overflow忽略，然后裁剪
  3. 由于設(shè)置了overflow，父級(jí)元素觸發(fā)BFC，沒有上外邊距合并，所以能夠顯示上邊的box-shadow

事實(shí)上，overflow不為visible與觸發(fā)BFC的條件很像，但不清楚是不是BFC的原因。

以上都是在chrome瀏覽器中發(fā)現(xiàn)的情況，因此可以試試上面兩位的解決方法。

但是

但是，如果你是在IE9瀏覽器中，那么僅僅是1px的margin是沒有辦法完整顯示box-shadow的，至少得是2px。

2017年5月5日 16:54
編輯回答
枕頭人

給父元素設(shè)置box-shadow偏移大小的padding

2017年2月8日 01:09
編輯回答
司令
.test {
    margin: 1px 1px 2px;
    ...
}
2018年2月11日 11:33