Firefox中的下拉菜單中斷 - 表格單元有問題？

我有一個歪斜的下拉菜單，它的工作方式幾乎與我想要的一樣，但是在Firefox中，下拉菜單顯示在主導航下方。我可以通過刪除「display：table-cell」來修復它，但是它會破壞其他屬性並導致nav不能正確縮放。（爲響應網站設計）對於Firefox的修復任何建議？Firefox中的下拉菜單中斷 - 表格單元有問題？

<html> 
    <head> 
    <meta content="text/html; charset=utf-8" 
      http-equiv="Content-Type" /> 

    <title>test doc1</title> 

    <!-- hack for bug in Web Developer addon for Firefox. Used for 
    development and debugging only--> 
    <link rel="stylesheet" 
     type="text/css" href="x" /> 

    <style type="text/css"> 

    .menu_nav 
    { 
     position:relative; 
    } 

    nav ul { 
     display: table; 
     height: 2em; 
     list-style:none; 
     width:95%; 
     font-family:BentonSans, helvetica, verdana, sans-serif; 
     font-size:81.3%; 


     } 

    nav ul li { 
     color: white; 
     font-weight:bold; 
     display: table-cell; 
     height: 2em; 
     padding: 0 2em 0 2em; 
     -moz-transform: skew(25deg); 
     -o-transform: skew(25deg); /* Opera fails */ 
     -webkit-transform: skew(25deg); 
     -ms-transform: skew(25deg); 
     transform: skew(25deg); 
     vertical-align:middle; 
     text-align: center; 
     border-left:.25px solid white; 
     position:relative; 
     background:#cc0000; 

     } 

     nav ul li a { 
     color: inherit; 
     display: block; 
     text-decoration: none; 
     -moz-transform: skew(-25deg); 
     -o-transform: skew(-25deg); 
     -webkit-transform: skew(-25deg); 
     -ms-transform: skew(-25deg); 
     transform: skew(-25deg); 
     padding:1em; 
     } 

     nav ul dl { 
     display:none; 
     -moz-transform: skew(-25deg); 
     -o-transform: skew(-25deg); 
     -webkit-transform: skew(-25deg); 
     -ms-transform: skew(-25deg); 
     transform: skew(-25deg); 
     float:left; 
     background:none repeat scroll #fff; 
     padding:0; 
     margin:0 
      } 

nav ul li dl {position:absolute; left:-2em; background:none repeat scroll #fff; } 

nav ul li dl a{display: block;} 

     nav ul dl li { 
     font-size:12px; 
     float:left; 
     color:#fff; 
     -moz-transform: skew(0deg); 
     -o-transform: skew(0deg); 
     -webkit-transform: skew(0deg); 
     -ms-transform: skew(0deg); 
     transform: skew(0deg); 
     width:100%; 
     height:37px; 
     background:#ddd; 
     padding:0; 
     margin-left:10px; 
     padding-left:10px; 
     } 
     nav ul dl li a { 
     width:100%; 
     color: inherit; 
     display: block; 
     text-decoration: none; 
     -moz-transform: skew(0deg); 
     -o-transform: skew(0deg); 
     -webkit-transform: skew(0deg); 
     -ms-transform: skew(0deg); 
     transform: skew(0deg); 
     color:#000; 
     float:left; 
     text-align:left; 
     padding:10px 0; 
     } 

     nav ul li:hover > dl { 
      display:block; 
      background:#ccc; 

     } 
      nav ul li dl li a:hover { 
      display:block; 
      background:#ccc; 

     } 



    </style> 
    </head> 

    <body> 
    <h1>Project</h1> 
    <nav> 
    <ul> 
     <li><a href="#"><span>ABOUT</span></a> 
     <dl> 
      <li class="menu_nav"><a href="#">HISTORY</a></li> 
      <li><a href="#">MISSION</a></li> 
      <li><a href="#">CONTACT</a></li> 
     </dl> 
     </li> 
     <li><a href="#"><span>COMMUNITY ENGAGEMENT</span></a> 
     <dl> 
      <li><a href="#">GOOD NEIGHBOR</a></li> 
      <li><a href="#">ACCESS TO SPORTS</a></li> 
      <li><a href="#">YOUTH EMPOWERMENT & LEADERSHIP</a></li> 
      <li><a href="#">VOLUNTEERISM</a></li> 
     </dl> 
     </li> 
     <li><a href="#"><span>STRATETIC INVESTMENTS</span></a> 
      <dl> 
      <li><a href="#">GOOD NEIGHBOR</a></li> 
      <li><a href="#">ACCESS TO SPORTS</a></li> 
      <li><a href="#">YOUTH EMPOWERMENT & LEADERSHIP</a></li> 
      <li><a href="#">VOLUNTEERISM</a></li> 
     </dl> 
     </li> 
     <li><a href="#"><span>CHARITABLE GIVING</span></a> 
      <dl> 
      <li><a href="#">GOOD NEIGHBOR</a></li> 
      <li><a href="#">ACCESS TO SPORTS</a></li> 
      <li><a href="#">YOUTH EMPOWERMENT & LEADERSHIP</a></li> 
      <li><a href="#">VOLUNTEERISM</a></li> 
     </dl> 
    </li> 
     <li><a href="#"><span>NEWS</span></a> 
      <dl> 
      <li><a href="#">GOOD NEIGHBOR</a></li> 
      <li><a href="#">ACCESS TO SPORTS</a></li> 
      <li><a href="#">YOUTH EMPOWERMENT & LEADERSHIP</a></li> 
      <li><a href="#">VOLUNTEERISM</a></li> 
     </dl> 
    </li> 
     <li><a href="#"><span>MULTIMEDIA</span></a> 
      <dl> 
      <li><a href="#">GOOD NEIGHBOR</a></li> 
      <li><a href="#">ACCESS TO SPORTS</a></li> 
      <li><a href="#">YOUTH EMPOWERMENT & LEADERSHIP</a></li> 
      <li><a href="#">VOLUNTEERISM</a></li> 
     </dl> 
    </li> 
    </ul> 
    </nav> 
    </body> 
</html>

來源

2014-03-26 user2561920

我想起了一個不喜歡「display：table-cell」中'position：absolute'的瀏覽器。快速谷歌搜索帶給我這個：http://davidwalsh.name/table-cell-position-absolute – brouxhaha

我不知道如何解決它，雖然 – user2561920

檢查了這一點http://jsfiddle.net/wNhD8/2/

我加white-space: nowrap;到nav ul

display: inline-block;到nav ul li

margin-left:-5px;到nav ul li

去除的白左邊框從nav ul li

來源

2014-03-26 22:32:14 enapupe

哦真棒 - 我會給這個試試謝謝！只是真的很快 - 你看到下降的下跌類似於在導航的一部分重疊？有什麼方法可以解決它嗎？ – user2561920

是的，它應該總是在紅色背景之後？ – enapupe

不只是正好在它下面 – user2561920

Firefox中的下拉菜單中斷 - 表格單元有問題？

回答

相關問題