【发布时间】：2018-06-28 01:01:59
【问题描述】：
我有一个问题，我的最后一个链接无法正确对齐。我的意思是，在 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'études de ES et de L ainsi que les principaux cours sur les objets d'é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'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>它会很好地显示为一个 sn-p，但是一旦你用 Safari 运行它，它就不再工作了，一切都搞砸了（这里我添加了一个边框以使框更清晰，它会'不要考虑最终版本）
如果有人知道如何解决这个问题，将不胜感激！
【问题讨论】：
-
不确定为什么它会在 Safari 中换行，但如果您从
::before中删除content:""，这与删除::before相同，它将正确对齐。它是绝对定位的，所以我不明白为什么它会增加整个锚的宽度。现在，您可以将white-space: nowrap;添加到.navigation-menu，直到找出原因