CSS定位不能在Internet Explorer中工作

我有一个关于css div定位的问题。CSS定位不能在Internet Explorer中工作

我从codepen.io创建了这个DEMO。

如果你用chrome或firefox检查这个演示，那么你可以看到.test div正确vorking，但是当你用Internet Explorer打开演示时，你可以看到.test div移到了左边。我如何解决这个问题，使所有的浏览器都可以在这方面帮助我？

.test { 
 
     display: block; 
 
     position: absolute; 
 
     height: auto; 
 
     top: 0; 
 
     left: 0; 
 
     right: 0; 
 
     max-width: 580px; 
 
     min-width: 300px; 
 
     margin-top: 64px; 
 
     margin-bottom: 20px; 
 
     margin-right: auto; 
 
     margin-left: auto; 
 
     padding-top: 2px; 
 
     background-color: #f7f7f7; 
 
     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2); 
 
     -webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px; 
 
     border-radius: 3px; 
 
     -webkit-border-radius: 3px; 
 
     -o-border-radius: 3px; 
 
     -moz-border-radius: 3px; 
 
     min-height: 840px; 
 
    } 
 
.header { 
 
    height: 12rem; 
 
    background: #009688; 
 
}