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;
}

应用与元素相同的规则，使其定位。

希望这有帮助。

Splash页面在Internet Explorer上不兼容

1 个答案: