Question

除了在Chrome中，我的网站似乎间距很好。在那里，导航栏比其他导航栏更向下，并且背景图像在照片上方有一点额外的空间。见这里

这是我的html：

<!DOCTYPE html/>
<html>

  <head>
    <link media="screen" type="text/css" rel="stylesheet" href="main.css"/>


    <title>
      Lovers &amp; Fighters
    </title>
  </head>
  <body id="home">
      <header id="photo">
      </header>
      <footer>
      <nav>
          <ul>
            <li><a href="http://chrismisterek.bandcamp.com" target="top">Music</a></li>
              <li>&#47;</li>
            <li><a href="https://www.youtube.com/user/loversandfighters1" target="top">Videos</a></li>
              <li>&#47;</li>
            <li><a href="http://facebook.com/loversandfighters">Social</a></li>
              <li>&#47;</li>
            <li><a href="mailto:chris.misterek@gmail.com" target="top">Email</a></li>
          </ul>
        </nav>
      </footer>
  </body>
</html>

我的CSS：

#photo{
  position: relative;
  background: #BCBCBC;
  background-image: url(images/bandbanner1.4.png);
  background-size: 100%;
  height: 109%;
  width: 101.8%;
  margin-top: -4%;
  margin-left: -1%;
  margin-bottom: -.7%;
  background-repeat: no-repeat;
}


nav{
  background-color: rgba(65,61,61,0.5);
  position: absolute;
  height: 10%;
  width: 104.5%;
  margin-left: -5%;
  margin-top: -4.6%;
  z-index: 1;
}

ul{
  position: absolute;
  display: inline;
  margin-top: 1.8%;
  margin-left: 28%;
  margin-bottom: -20%;
  color: white;
  font-size: 105%;
  font-family: 'Courier';
  text-transform: uppercase;
}

li{
  display: inline;
  padding-left: 30px;
}

a:link{
  color: #BCBCBC;
  text-decoration: none;
}

a:visited{
  color: #BCBCBC;
}

a:hover{
  text-decoration: underline;
}

我很感激任何帮助！

Answer 1

所以，我最终将图像放在html元素中，并将溢出隐藏在其中。它似乎解决了这个问题。像这样：

html {
  background: url(images/bandbanner1.4.png) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
  min-height: 100%;
  min-width: 100%;
}

全部谢谢

Chrome中的保证金问题

1 个答案: