【发布时间】：2023-03-22 05:21:01
【问题描述】：
在我的菜单中将 FontAwesome 图标“caret-right”应用于三个 li-/a-标签，以指示子菜单的存在。图标应右对齐。我的代码适用于 Chrome 和 Edge，但不适用于 Firefox。阅读有关通过 CDN 加载 FA 文件的可能问题，因此我切换到从我的网络空间加载它们，但没有成功。我可以看到菜单项末尾的图标，但它们被切断并向下推。 这是我的 HTML 和 CSS：
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="all" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/960.css" />
<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
<title>Titel</title>
<style type="text/css">
body, select, input, textarea, button {
font-family: 'Trebuchet MS',Verdana,Helvetica,Arial,sans-serif;
font-size: 13px;
line-height: 1.5em;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav > ul > li {
float: left;
}
nav > ul > li > ul {
display: none;
}
nav > ul a {
display: block;
white-space: nowrap;
padding: 10px;
background: #444;
color: #fff;
text-decoration: none;
}
nav > ul > li > a:after {
content: "\f0d7";
font-family: 'FontAwesome';
padding-left: 0.35em
}
nav > ul li > a:only-child:after {
content: "";
}
nav > ul > li:hover > ul {
display: block;
position: absolute;
}
nav > ul > li > ul > li {
position: relative;
}
nav > ul > li > ul > li > a:after {
float: right;
content: "\f0da";
font-family: 'FontAwesome';
padding-left: 1em
}
nav > ul li > a:only-child:after {
content: "";
}
nav > ul > li > ul > li > ul {
display: none;
}
nav > ul > li > ul > li:hover > ul {
display: block;
position: absolute;
left: 100%;
top: 0;
}
</style>
</head>
<body>
<nav>
<ul class="grid_12">
<li><a href="#">Home</a></li>
<li><a href="./mitglieder/mitglieder.php">Mitglieder</a></li>
<li><a href="#">Clubturniere</a>
<ul>
<li><a href="./cm/cm.php">Clubmeisterschaft</a></li>
<li><a href="./mobl/mobl_gw.php">Monats-Blitzturniere</a></li>
</ul>
</li>
<li><a href="./mannschaft/mannschaften.php">Mannschaften</a>
<ul>
<li><a href="#">Bayerische Meisterschaft</a>
<ul>
<li><a href="./mannschaft/m1.php">1. Mannschaft</a></li>
<li><a href="./mannschaft/m2.php">2. Mannschaft</a></li>
</ul>
</li>
<li><a href="#">Münchner Meisterschaft</a>
<ul>
<li><a href="./mannschaft/m3.php">3. Mannschaft</a></li>
<li><a href="./mannschaft/m4.php">4. Mannschaft</a></li>
<li><a href="./mannschaft/m5.php">5. Mannschaft</a></li>
<li><a href="./mannschaft/m6.php">6. Mannschaft</a></li>
<li><a href="./mannschaft/m7.php">7. Mannschaft</a></li>
</ul>
</li>
<li><a href="#">Senioren</a>
<ul>
<li><a href="./mannschaft/sen_m1.php">Senioren 1</a></li>
<li><a href="./mannschaft/sen_m2.php">Senioren 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="./termine/termine.php">Termine</a></li>
<li><a href="#">Schachaufgaben</a>
<ul>
<li><a href="./aufgaben/schachaufgaben_1.php">Nummer 1 – 18</a></li>
<li><a href="./aufgaben/schachaufgaben_2.php">Nummer 19 – 36</a></li>
</ul>
</li>
<li><a href="./archiv/archiv.php">Archiv</a></li>
<li><a href="./kontakt/kontakt.php">Kontakt</a></li>
</ul>
</nav>
</body>
</html>文件的链接是http://msc1836.bplaced.net/menutest.html 操作系统为Win-10，火狐版本为50.1.0。
有人可以帮忙吗？ 谢谢，迈克
【问题讨论】：
-
从
nav > ul a中删除white-space: nowrap;
标签： css firefox font-awesome-4