0

我在我的 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>
4

1 回答 1

0

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

可以像在此解决方案中一样修复边界问题：

如何删除超链接图像周围的轮廓？

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

html5 新元素（页眉、导航、页脚、..）在 IE 中不起作用

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

BODY {
    margin: 0px;
}

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

希望这可以帮助。

于 2013-06-13T10:22:24.987 回答