Internet Explorer上不兼容的閃屏頁

我在我的Wordpress網站上設置了一個閃屏頁，雖然在Internet Explorer中完全錯誤，但似乎在Chrome，Firefox和Safari中正確顯示。大圖像周圍有一個白色邊框，可點擊的徽標和社交媒體框已被推到大圖像下方，並在其周圍有藍色邊框。Internet Explorer上不兼容的閃屏頁

http://www.emma-saunders.net/

我用下面的代碼來設置它：

<img id="bg-im" src="http://www.emma-saunders.net/wp-content/uploads/2013/06/splash-1.png"> 

      <nav id="nav-social"> 

       <ul> 

        <li><a href="https://www.facebook.com/esaundersphotography" target="_blank"><img src="http://www.emma-saunders.net/wp-content/uploads/2013/06/facebook.png" alt="Follow Emma Saunders on Facebook" width="55" height="55"></a></li> 
        <li><a href="https://twitter.com/ESaundersphoto" target="_blank"><img src="http://www.emma-saunders.net/wp-content/uploads/2013/06/twitter.png" alt="Follow Emma Saunders on Twitter" width="55" height="55"></a></li> 
        <li><a href="mailto:[email protected]"><img src="http://www.emma-saunders.net/wp-content/uploads/2013/06/email.png" alt="Email us" width="55" height="55"></a></li> 

       </ul> 

      </nav> 

<a href="http://www.emma-saunders.net/latest-works/"><img id="logo" src="http://www.emma-saunders.net/wp-content/uploads/2013/06/emma-saunders-logo.png"></a> 

<style type="text/css"> 
#bg-im { 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1024px; 

    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 

    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0; 

    z-index: -1; 
} 

@media screen and (max-width: 1024px) { /* Specific to this particular image */ 
#bg-im { 
    left: 50%; 
    margin-left: -512px; /* 50% */ 
    } 
} 

ul { 
    list-style: none; 
} 

#nav-social { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    z-index: 100; 
} 

#nav-social li { 
    float: left; 
    border-right: 1px solid #000000; 
    background-color: #333333; 
    -webkit-transition: background-color .4; 
} 

#nav-social li a { 
    display: block; 
    overflow: hidden; 
    width: 55px; 
    height: 55px; 
} 

#nav-social li:hover { 
    background-color: #1aff94; 
} 

#logo { 
    display: block; 
    width: 900px; 
    height: 506px; 
    margin: auto; 
} 

</style>

來源

2013-06-13 user1652997