CSS - 孩子不繼承父的寬度液態佈局

Question

所有，

這似乎是火狐相關的問題（還沒有嘗試歌劇& IE）。

我有'ul'兒童在液體佈局中給予100％的寬度。父'李'本身的寬度爲其父'ul'的33％。

Chrome似乎正確顯示了子'ul'的寬度，即它的100％等於它的父'li'寬度的33％。但是，Firefox會將'ul'子元素的寬度拉伸到完整的視口寬度。

的jsfiddle：http://jsfiddle.net/g4VAd/2/

  <div id="filemenu">      <!-- right tabs menu --> 
     <ul id="fm_ul"> 
      <li class="filetabs">File 
       <ul> 
        <li class="m_items">Open</li> 
        <li class="m_items">Save</li> 
        <li class="m_items">Exit</li> 
       </ul></li><li class="filetabs">Edit 
       <ul> 
        <li class="m_items">Undo</li> 
        <li class="m_items">Redo</li> 
       </ul></li><li class="filetabs">Settings 
       <ul> 
        <li class="m_items" id="frontView"><span>Front View</span></li> 
        <li class="m_items"id="backView"><span>Back View</span></li> 
       </ul></li> 
     </ul> 
    </div>     <!-- close -> 'filemenu' div --> 

CSS：

#filemenu { 
    float: right; 
    width: 37%; 
    height: 100%; 
} 
#fm_ul { 
    float: right; 
    display: table; 
    width: 100%; 
    height: 100%; 
    cursor: pointer; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    border-radius: 6px;     /* Opera & IE9 donot have prefixes, directly support border-radius */ 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1); 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1); 
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);     /* Opera & IE9 donot have prefixes, directly support border-radius */ 
    background: rgb(232,232,232); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgb(232,232,232) 0%, rgb(252,252,252) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(232,232,232)), color-stop(100%,rgb(252,252,252))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgb(232,232,232) 0%,rgb(252,252,252) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgb(232,232,232) 0%,rgb(252,252,252) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgb(232,232,232) 0%,rgb(252,252,252) 100%); /* IE10+ */ 
    background: linear-gradient(top, rgb(232,232,232) 0%,rgb(252,252,252) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#fcfcfc',GradientType=0); /* IE6-8 */ 
} 
    .filetabs { 
     display: table-cell; 
     position: relative; 
     width: 33%; 
     height: 100%; 
     color: rgb(125,125,125); 
     font-size: 0.8em; 
line-height: 25px; 
     text-align: center; 
     text-decoration: none; 
     -moz-text-shadow: 0 1px 2px rgba(150,150,150,0.4); 
     -webkit-text-shadow: 0 1px 2px rgba(150,150,150,0.4); 
     text-shadow: 0 1px 2px rgba(150,150,150,0.4);  
     vertical-align: middle; 
     list-style-type: none; 
    } 
     .filetabs:first-child { 
      -webkit-border-top-left-radius: 6px; 
      -webkit-border-bottom-left-radius: 6px; 
      -moz-border-radius-topleft: 6px; 
      -moz-border-radius-bottomleft: 6px; 
      border-top-left-radius: 6px; 
      border-bottom-left-radius: 6px;   
     } 
     .filetabs:last-child { 
      -webkit-border-top-right-radius: 6px; 
      -webkit-border-bottom-right-radius: 6px; 
      -moz-border-radius-topright: 6px; 
      -moz-border-radius-bottomright: 6px; 
      border-top-right-radius: 6px; 
      border-bottom-right-radius: 6px;   
     } 
     .filetabs:hover { 
      color: rgb(150,150,150); 
      -moz-text-shadow: 0 1px 0 rgba(255,255,255,0.95); 
      -webkit-text-shadow: 0 1px 0 rgba(255,255,255,0.95); 
      text-shadow: 0 1px 0 rgba(255,255,255,0.95); 
     } 
     .filetabs ul { 
      display: none; 
      float: left; 
      position: absolute; 
      width: 100%; 
      opacity: 0; 
      -webkit-transition: 0.35s linear opacity; 
      -moz-transition: 0.35s linear opacity; 
      -o-transition: 0.35s linear opacity; 
      transition: 0.35s linear opacity; 
      z-index: 100; 
     } 
      .m_items { 
       width: 100%; 
       list-style: none; 
       padding-top: 1px; 
       background-color: rgba(1,1,1,0.8); 
       -moz-box-shadow: 2px 0 2px rgba(1,1,1,0.2); 
       -webkit-box-shadow: 2px 0 2px rgba(1,1,1,0.2); 
       box-shadow: 2px 0 2px rgba(1,1,1,0.2); 
      } 
       .m_items span { 
        font-size: 0.8em; 
        cursor: default; 
       } 
       .m_items:first-child {     /* for borders */ 
        -moz-border-radius: 4px 4px 0 0; 
        -webkit-border-radius: 4px 4px 0 0; 
        border-radius: 4px 4px 0 0; 
       } 
       .m_items:last-child {     /* for borders */ 
        padding-bottom: 5px; 
        -moz-border-radius: 0 0 4px 4px; 
        -webkit-border-radius: 0 0 4px 4px; 
        border-radius: 0 0 4px 4px; 
       } 

Answer 1

這個問題似乎是與display: table-cell。我試圖用display: inline-block;和float: left;替換它，並且子菜單開始與兩者兼容。

我還建議在看看這篇文章使用inline-block垂直居中：http://css-tricks.com/centering-in-the-unknown