Question

我只在Safari中有一个页脚问题，在其他浏览器中一切正常。在灰色的页脚部分和底部的浏览器边缘之间有一个奇怪的洞。

以下是页脚代码：

HTML：

<footer>
  <div class="top-footer">
    <div class="wrapper">
      <a class="top" href="#main-slider" title="Back to top">Back to top</a>
      <ul class="footer-menu">
        <li><a href="https://www.chessable.com/about-us/" title="About Us">About Us</a></li>
        <li><a href="https://www.chessable.com/contact-us/" title="Contact Us">Contact Us</a></li>
        <li><a href="https://www.chessable.com/faq/" title="FAQs">FAQs</a></li>
        <li><a href="https://www.chessable.com/terms/" title="Terms of Use">Terms of Use</a></li>
        <li><a href="https://www.chessable.com/faq/#beta" title="Open Beta">Open Beta</a></li>
      </ul>
    </div>
  </div>
  <div class="bottom-footer">
    <div class="wrapper clear">
      <ul class="footer-menu">
        <li><a href="https://www.chessable.com/science/" title="Science">Science</a></li>
        <li><a href="https://www.chessable.com/leaderboard/" title="Leaderboards">Leaderboards</a></li>
        <li><a href="https://www.chessable.com/press/" title="Press">Press</a></li>
        <li><a href="https://www.chessable.com/privacy/" title="Privacy &amp; Cookies">Privacy &amp; Cookies</a></li>
      </ul>
      <div class="social-icons">
        <a class="fb" href="#" title="Join Us on Facebook"><i class="fa fa-facebook"></i></a>
        <a class="tw" href="#" title="Join Us on Twitter"><i class="fa fa-twitter"></i></a>
      </div>
    </div>
  </div>
</footer>

CSS：

.new-frontpage footer {
  margin: 0px;
  padding: 0px;
  min-height: auto;
  background-color: transparent;
  background-image: none;
  z-index: 0;
  position: relative;
  border-top: none;
}

.new-frontpage .top-footer {
  background: url('../img/top-footer-bg.png') 0 0 repeat #385a89;
  padding: 22px 0px;
  position: relative;
}

.new-frontpage .top-footer .wrapper {
  position: relative;
}

.new-frontpage .top-footer a.top {
  width: 60px;
  height: 60px;
  display: block;
  position: absolute;
  text-indent: -9999px;
  background: #3C3C3C;
  top: 94px;
  right: -100px;
  border-radius: 5px;
}

.new-frontpage .top-footer a.top:after {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  display: block;
  background: url('../img/sprites.png') -250px -72px no-repeat;
  top: 15px;
      left: 15px;
}

.new-frontpage footer .footer-menu {
  list-style-type: none;
  text-align: center;
  position: relative;
  z-index: 10;
}

.new-frontpage footer .footer-menu li {
  display: inline-block;
  margin-right: 30px;

}

.new-frontpage footer .footer-menu li:after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 100px;
  margin-left: 30px;
}

.new-frontpage footer .footer-menu li:last-child {
  margin-right: 0px;
}

.new-frontpage footer .footer-menu li:last-child:after {
  display: none;
}

.new-frontpage footer .footer-menu li a {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
}

.new-frontpage footer .footer-menu li a:hover {
  color: #b6c7e0;
}

.new-frontpage footer:after {
  display: none !important;
}

.new-frontpage .bottom-footer {
  background: #353535;
  padding: 20px 0px;
}

.new-frontpage .bottom-footer .logo-block {
  width: 216px;
}

.new-frontpage .bottom-footer .logo-block a {
  font-size: 34px;
  font-weight: 700;
  color: white;
  text-transform: lowercase;
  margin-top: -6px;
  display: inline-block;
}

.new-frontpage .bottom-footer .logo-block a img {
  display: inline-block;
  top: 6px;
  position: relative;
  margin-right: 11px;
}

.new-frontpage .bottom-footer .footer-menu li:after {
  display: none;
}

.new-frontpage footer .social-icons {
  margin-top: 22px;
  text-align: center;
}

.new-frontpage footer .social-icons a {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 5px;
  margin-right: 20px;
  text-align: center;
}

.new-frontpage footer .social-icons a i  {
  font-size: 22px;
  text-align: center;
  position: relative;
  top: 5px;
}

.new-frontpage footer .social-icons a.tw i {
  color: #5ea9dd;
}

.new-frontpage footer .social-icons a:last-child{
  margin-right: 0px;
}


@keyframes social-animation {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(40deg);
  }

  40% {
    transform: rotate(0deg);
  }

  80% {
    transform: rotate(-40deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.new-frontpage footer .social-icons a:hover {
  -ms-animation: social-animation 0.3s linear 0s 1;
  -o-animation: social-animation 0.3s linear 0s 1;
  -webkit-animation: social-animation 0.3s linear 0s 1;
  -moz-animation: social-animation 0.3s linear 0s 1;
  animation: social-animation 0.3s linear 0s 1;
}

Answer 1

问题是Safari存在问题

min-height: auto;

问题已解决

min-height: 0px;

Safari中的页脚问题

1 个答案: