Второй Box-Shadow появляется в Chrome?

Question

Я относительно новичок в кодировании, и я работаю над этим как над домашним заданием для моего класса CS195 (HTML / CSS).Я пытаюсь заставить оба макета выглядеть одинаково в обоих браузерах, но я не могу понять, где мое кодирование не подходит для Chrome.Я использую SublimeText3, если это вообще помогает.

(Не обращайте внимания на панель навигации, я еще не исправил это.)

Я попытался настроить размер окна веб-набора иРазмер окна 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

Результаты IE

Это один из ресурсовЯ попробовал - первая часть, где написано:

.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; в <div> #main, #recent, #favs, #followus в css, вторая рамка-тень исчезнет в Chrome.