2017-01-03 47 views
0

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

+0

刪除'white-space:nowrap;'從'nav> ul a' –

回答

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

1

刪除在nav > ul awhite-space這是影響在Firefox中float: right僞元素。

然而,讓您的li元素在一條直線上,給min-width值,例如:

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

感謝肖漢單寶元和nashcheez您的快速反應。從nav > ul a部分刪除white-space命令解決了該問題。我另外申請了一個min-width我的第三級鏈接,其行將被包裝,否則。