Html Internet Explorer上的启动页不兼容

我在我的Wordpress网站上设置了一个启动页面，它在Chrome、Firefox和Safari中似乎显示正确，尽管在InternetExplorer中完全错误。大图像周围有白色边框，可点击的徽标和社交媒体框被推到大图像下方，周围有蓝色边框

我使用以下代码进行设置：

<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:info@emma-saunders.net"><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>

#bg im{
/*设置填充背景的规则*/
最小高度：100%；
最小宽度：1024px；
/*设置比例缩放*/
宽度：100%；
高度：自动；
/*设置定位*/
位置：固定；
排名：0；
左：0；
z指数：-1；
}
@媒体屏幕和（最大宽度：1024px）{/*特定于此特定图像*/
#bg im{
左：50%；
左边距：-512px；/*50%*/
}
}
保险商实验室{
列表样式：无；
}
#社会导航{
位置：绝对位置；
顶部：0px；
右：0px；
z指数：100；
}
#纳夫社会学院{
浮动：左；
右边框：1px实心#000000；
背景色：#333333；
-webkit过渡：背景色；
}
#nav社会保险公司{
显示：块；
溢出：隐藏；
宽度：55px；
高度：55px；
}
#导航社会李：悬停{
背景色：#1aff94；
}
#标志{
显示：块；
宽度：900px；
高度：506px；
保证金：自动；
}

第一个IMG元素没有“/”所以它没有关闭

边界问题可以通过以下解决方案解决：

最困难的部分是对IE7和IE8的支持，因为这些旧浏览器无法处理此类元素，因此无法遵守css布局规则。最好的解决方案是让他们能够使用HTML 5，正如他们在本文中建议的那样：

添加以下规则以修复这些浏览器上的空白：

BODY {
    margin: 0px;
}

对元素应用与对相同的规则，以便对其进行定位

---

希望这能有所帮助。

即使在我添加“/”之后，我仍然在IE中遇到同样的问题。我注意到您在IE 8和7上遇到了布局问题。我正在尝试另一种方法来适应控制。在加入HTML5 shiv脚本之后，我似乎仍然有问题。是的，似乎定位中心图像和“白色边框”问题有问题。