字体真棒图标在Firefox中排列错误

时间：2017-01-03 13:42:06

标签： css firefox font-awesome-4

将FontAwesome图标“caret-right”应用于菜单中的三个li- / a-tags，以指示子菜单的存在。图标应右对齐。我的代码适用于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。

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

3 个答案:

答案 0 :(得分：1)

删除white-space表单nav > ul a并且它正常运行

 <!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>

答案 1 :(得分：1)

删除white-space中影响Firefox中nav > ul a伪元素的float: right。

但是，为了使li元素保持一条直线，请提供min-width值：

nav > ul a {
    display: block;
    min-width: 90px;
    padding: 10px;
    background: #444;
    color: #fff;
    text-decoration: none;
}

答案 2 :(得分：0)

感谢Minal Chauhan和nashcheez的快速回复。从white-space部分删除nav > ul a命令解决了该问题。我还在我的第3级链接上应用了min-width，否则其行将被包裹。

相关问题
最新问题