第二个Box-Shadow出现在Chrome中？

Question

我对编码还比较陌生，并且正在将其作为CS195（HTML / CSS）类的作业。我试图使两种布局在两种浏览器中看起来都一样，但是我不知道我的编码在Chrome哪里出错了。如果有帮助，我正在使用SublimeText3。

（忽略导航栏，我也尚未修复。）

我尝试过调整Webkit框的大小和Moz框的大小，但是我不确定该怎么做，因为这会影响网站的IE版本，但不会摆脱Chrome上的辅助框...

我在框中使用的代码：

.box {
    overflow: hidden;
    overflow-y:auto;
    height: 200px;
    width: 565px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,1) 100%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 25px;
    padding: 20px;
    opacity: 0.85;
}

.box2 {
    overflow: hidden;
    overflow-y:auto;
    left: 20%;
    height: 545px;
    width: 650px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,1) 100%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 25px;
    padding: 20px;
    opacity: 0.85;
}

.box3 {
    overflow: hidden;
    overflow-y:auto;
    height: 220px;
    width: 400px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,1) 100%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 25px;
    padding: 20px;
    opacity: 0.85;
}

.box4 {
    overflow: hidden;
    overflow-y:auto;
    height: 220px;
    width: 400px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,1) 100%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 25px;
    padding: 20px;
    opacity: 0.85;
}

Chrome results

IE results

This is one of the resources I tried-第一部分，内容为：

.shadow {
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

任何帮助都会非常感谢。这是我的最终决定。谢谢！

Answer 1

我复制了您在jsfiddle中提供的代码的一部分，发现如果将padding: 20px;放到CSS的<div> #main, #recent, #favs, #followus中，第二个盒子阴影将在Chrome中消失。