Question

当我在不同的浏览器上运行此代码，然后在firefox，chrome，opera等浏览器上运行时，它很好但是当我在Safari浏览器上运行此代码时，顶级导航块之间存在差距，为什么？

* {
  box-sizing: border-box;
}
nav {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}
.top-nav {
  text-align: center;
  font-size: 0;
}
.top-nav li {
  display: inline-block;
  width: 14.28571428571429%;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
}
.top-nav > li.active > a {
  color: #CBD2D4;
}
.top-nav > li:hover,
.sub-nav > li:hover {
  color: white;
}
.top-nav > li a {
  font-family: 'Baumans', serif;
  text-decoration: none;
  font-size: 16px;
  line-height: 2em;
  text-align: center;
  display: block;
  color: #CBD2D4;
}
.top-nav > li a {
  border-left: 1px solid black;
  border-right: 1px solid #3c3c3c;
  border-bottom: 1px solid black;
  border-top: 1px solid #3c3c3c;
}
.top-nav > li > a:hover,
.sub-nav > li > a:hover {
  color: #FD954F;
}
.sub-nav {
  position: absolute;
  width: 100%;
  visibility: hidden;
  z-index: 99999;
}
.top-nav li:hover .sub-nav {
  visibility: visible;
}
.sub-nav > li {
  display: block;
  width: 100%;
  position: relative;
}
.sub-nav > li a {
  border-bottom: 1px solid black;
  border-top: 1px solid #3c3c3c;
}
.sub-nav > li:first-child {
  border-top: none;
}
.sub-nav > li:last-child {
  border-bottom: none;
}
/*Display the dropdown on hover*/

.top-nav li a:hover + .hidden,
.hidden:hover {
  display: block;
}

<!DOCTYPE html>
<html>

<body>
  <ul class="top-nav" id="menu">
    <li class="active"><a href="djakhiltalreja_home.php">Home</a>
    </li>
    <li><a href="#">Music</a>
      <ul class="sub-nav hidden">
        <li><a href="djakhiltalreja_single_music.php">Single</a>
        </li>
        <li><a href="djakhiltalreja_album_music.php">Album</a>
        </li>
      </ul>
    </li>
    <li><a href="djakhiltalreja_video.php">Video</a>
    </li>
    <li><a href="#">New Release</a>
      <ul class="sub-nav hidden">
        <li><a href="djakhiltalreja_single_newrelease.php">Single</a>
        </li>
        <li><a href="djakhiltalreja_album_newrelease.php">Album</a>
        </li>
        <li><a href="djakhiltalreja_video_newrelease.php">Video</a>
        </li>
      </ul>
    </li>
    <li><a href="djakhiltalreja_image.php">Image</a>
    </li>
    <li><a href="djakhiltalreja_partymap.php">Partymap</a>
    </li>
    <li><a href="djakhiltalreja_contactus.php">Contact Us</a>
    </li>
  </ul>

</body>

</html>

为什么在safari中的菜单块之间存在差距，而在chrome，mozilla，opera等浏览器中没有差异？

0 个答案: