Question

我遇到的问题是我的上一个链接无法正确对齐。通过这个，我的意思是在Chrome中它工作得很好，但在Safari中，最后一个总是以一种奇怪的方式放在下面。有人可以告诉我如何解决这个问题吗？

* {
  margin: 0px;
  font-family: Futura;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  color: white;
}

body {
  background-image: url("../Media/body-bg.png");
}


/* NOTE: Class */

.navigation-box {
  height: 60px;
  width: 100%;
  background-color: MediumSeaGreen;
  position: fixed;
  z-index: 1;
}

.navigation-menu {
  margin: 6px 15px;
  float: right;
  color: white;
}

.navigation-link {
  padding: 6px 10px;
  font-weight: 100 !important;
  font-size: 23px;
  padding-bottom: 15px;
  text-decoration: none;
  position: relative;
}

.navigation-link:before {
  content: "";
  position: absolute;
  height: 3px;
  bottom: 0;
  left: 50%;
  right:50%;
  background:DarkGreen;
  transition: all ease-in-out 300ms;
}

.selected::after {
  content: "";
  position: absolute;
  height: 3px;
  bottom: 0;
  left: 0;
  right: 0;
  background:DarkGreen;
}

.navigation-link:hover {
  color: Wheat;
}

.navigation-link:hover::before,.navigation-link.active:before {
  left: 0;
  right:0;
}

.vline {
  border-left: 2px solid white;
  padding-bottom: 6px;
  margin: 0px 0px 0px 10px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Plans Du Bac</title>
    <link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div class="navigation-box">
      <h1 class="navigation-menu">
        <a href="#" class="navigation-link selected">Accueil</a><a class="vline"></a>
        <a href="./Data/Pages/cours.html" class="navigation-link">Cours</a><a class="vline"></a>
        <a href="./Data/Pages/plans.html" class="navigation-link">Plans</a><a class="vline"></a>
        <a href="./Data/Pages/plus.html" class="navigation-link">Plus</a>
      </h1>
    </div><br><br><br>
    <div class="text-box">
      <h1 class="page-title" style="width: 125px;">Accueil</h1>
        <p class="stylized">Plans du Bac est un fichier qui peut être utilisé sans internet, il regroupe les plans des oeuvres de français pour les objets d&apos;études de ES et de L ainsi que les principaux cours sur les objets d&apos;études ou sur les notions importantes.</p>
        <p class="stylized">Ce serait cool, si jamais vous voyez quelque chose qui ne marches pas sur le site ou si jamais vous voyez une erreur dans un cours ou dans une fiche de me le dire comme ça sa évitera que d&apos;autres personnes apprennent un mauvais cours ou des trucs faux. :)</p>
      <h1 class="a-box-title">Liste des modifications</h1>
        <p class="stylized"></p>
    <div>
  </body>

</html>

它会显示为一个片段，但是一旦你用Safari运行它，它就不再工作了，所有的东西都搞砸了（这里我添加了一个边框，使盒子更清晰，它不会在最终版本上思考）

如果有人知道如何解决这个问题，我们将非常感激！

Answer 1

只需将display:inline-block应用于您的锚元素即可。默认情况下，<a>代码是内联 ，但基本上默认值与浏览器相关 ，因此不同的浏览器会采用不同的方式。

* {
  margin: 0px;
  font-family: Futura;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  color: white;
}

body {
  background-image: url("../Media/body-bg.png");
}


/* NOTE: Class */

.navigation-box {
  height: 60px;
  width: 100%;
  background-color: MediumSeaGreen;
  position: fixed;
  z-index: 1;
}

.navigation-menu {
  margin: 6px 15px;
  float: right;
  color: white;
}

.navigation-link {
  padding: 6px 10px;
  font-weight: 100 !important;
  font-size: 23px;
  padding-bottom: 15px;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.navigation-link:before {
  content: "";
  position: absolute;
  height: 3px;
  bottom: 0;
  left: 50%;
  right: 50%;
  background: DarkGreen;
  transition: all ease-in-out 300ms;
}

.selected::after {
  content: "";
  position: absolute;
  height: 3px;
  bottom: 0;
  left: 0;
  right: 0;
  background: DarkGreen;
}

.navigation-link:hover {
  color: Wheat;
}

.navigation-link:hover::before,
.navigation-link.active:before {
  left: 0;
  right: 0;
}

.vline {
  border-left: 2px solid white;
  padding-bottom: 6px;
  margin: 0px 4px 0px 0px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Plans Du Bac</title>
  <link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="navigation-box">
    <h1 class="navigation-menu">
      <a href="#" class="navigation-link selected">Accueil</a>
      <a class="vline"></a>
      <a href="./Data/Pages/cours.html" class="navigation-link">Cours</a>
      <a class="vline"></a>
      <a href="./Data/Pages/plans.html" class="navigation-link">Plans</a>
      <a class="vline"></a>
      <a href="./Data/Pages/plus.html" class="navigation-link">Plus</a>
    </h1>
  </div><br><br><br>
  <div class="text-box">
    <h1 class="page-title" style="width: 125px;">Accueil</h1>
    <p class="stylized">Plans du Bac est un fichier qui peut être utilisé sans internet, il regroupe les plans des oeuvres de français pour les objets d&apos;études de ES et de L ainsi que les principaux cours sur les objets d&apos;études ou sur les notions importantes.</p>
    <p class="stylized">Ce serait cool, si jamais vous voyez quelque chose qui ne marches pas sur le site ou si jamais vous voyez une erreur dans un cours ou dans une fiche de me le dire comme ça sa évitera que d&apos;autres personnes apprennent un mauvais cours ou des trucs
      faux. :)</p>
    <h1 class="a-box-title">Liste des modifications</h1>
    <p class="stylized"></p>
    <div>
</body>

</html>

对齐问题 - 导航栏CSS / html

1 个答案: