css - Font Awesome 图标在 Firefox 中对齐错误

标签 css firefox font-awesome-4

将 FontAwesome 图标“caret-right”应用于我菜单中的三个 li-/a-tag，以指示子菜单的存在。图标应右对齐。我的代码适用于 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&#8201;&#8211;&#8201;18</a></li>
                        <li><a href="./aufgaben/schachaufgaben_2.php">Nummer 19&#8201;&#8211;&#8201;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，Firefox版本为50.1.0。

有人可以帮忙吗？ 谢谢，迈克

最佳答案

从 nav > ul a 中删除 white-space 并且它工作正常

 <!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&#8201;&#8211;&#8201;18</a></li>
                        <li><a href="./aufgaben/schachaufgaben_2.php">Nummer 19&#8201;&#8211;&#8201;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>

关于css - Font Awesome 图标在 Firefox 中对齐错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41444873/

上一篇：javascript - CSS/JS : Appended element does not animate

下一篇：css - 悬停在一个元素上会影响所有元素

相关文章：

asp.net-mvc - 无法显示 Font Awesome 图标？

javascript - 未显示所选文件名

javascript - 带有 javascript 到 IE 的 Firefox XUL 工具栏？

css - 同一个 Firefox 中导航栏 Bootstrap 的区别

html - Firefox 在其他浏览器中的字符串中断行为？

css - Font Awesome (4.0.3)+ bootstrap(3.0.0)+ asp.net : changing font family

html - 某些 Font Awesome 图标不起作用

javascript - HTML5 与 Javascript 有什么区别

javascript - 如何在悬停另一个 div 时更改 div 背景图像

css - 格式化网页上的文本

©2024 IT工具网  联系我们