CSS - 子供は液体レイアウトで親の幅を継承しない

Question

すべて、

これは、Firefox関連の問題（haventはオペラ& IEを試してみました）ように見えます。

私は液体レイアウトで100％の幅を与えられた 'ul'子を持っています。親「li」自体の親の「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