Internet Explorer 上的启动页不兼容

Question

我在我的 Wordpress 网站上设置了一个启动页面，它似乎在 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: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>

Answer 1

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

边界问题可以像这个解决方案一样修复：

How can I remove the outline around hyperlinks images?

最困难的部分是对IE 7和8的支持，因为这些旧浏览器无法处理此类元素，因此无法遵守css布局规则。可能的最佳解决方案是让他们能够按照他们在这篇文章中的建议使用 HTML 5：

html5 new elements (header, nav, footer, ..) not working in IE

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

BODY {
    margin: 0px;
}

对元素应用与 相同的规则，以便它被定位。

希望这会有所帮助。