將FontAwesome圖標「caret-right」應用於我的菜單中的三個li/a-tags,以指示存在子菜單。圖標應右對齊。我的代碼適用於Chrome和Edge,但不適用於Firefox。閱讀關於通過CDN加載FA文件可能存在的問題,所以我切換到從我的webspace加載它們,但沒有成功。我可以看到菜單項末尾的圖標,但它們被切斷並被壓下。 這裏是我的HTML和CSS:Font Awesome圖標在Firefox中對齊錯誤
<!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 {
\t font-family: 'Trebuchet MS',Verdana,Helvetica,Arial,sans-serif;
\t font-size: 13px;
\t 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 {
\t content: "\f0d7";
\t 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 {
\t float: right;
content: "\f0da";
\t 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>
\t <nav>
\t \t <ul class="grid_12">
\t \t \t <li><a href="#">Home</a></li>
\t \t \t <li><a href="./mitglieder/mitglieder.php">Mitglieder</a></li>
\t \t \t <li><a href="#">Clubturniere</a>
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="./cm/cm.php">Clubmeisterschaft</a></li>
\t \t \t \t \t <li><a href="./mobl/mobl_gw.php">Monats-Blitzturniere</a></li>
\t \t \t \t </ul>
\t \t \t </li>
\t \t \t <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>
\t \t \t </li>
\t \t \t <li><a href="./termine/termine.php">Termine</a></li>
\t \t \t <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>
\t \t \t <li><a href="./archiv/archiv.php">Archiv</a></li>
\t \t \t <li><a href="./kontakt/kontakt.php">Kontakt</a></li>
\t \t </ul>
\t </nav>
</body>
</html>
該文件的鏈接是http://msc1836.bplaced.net/menutest.html OS是贏-10,Firefox的版本是50.1.0。
任何人都可以幫忙嗎? THX,麥克
刪除'white-space:nowrap;'從'nav> ul a' –