CSS - 아이가</p> <p>이 파이어 폭스 관련 문제가 될 것으로 보인다 액체 레이아웃

Question

모든에서 부모의 폭을 상속하지 (havent 한 오페라 & IE 시도).

저는 액상 레이아웃에서 100 % 너비가 주어진 'ul'아이들을가집니다. 부모 'li'자체의 너비는 부모 'ul'의 33 %입니다.

크롬은 하위 '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;으로 바꾸려고 시도했는데 부 메뉴가 양쪽 모두로 작동하기 시작했다. http://css-tricks.com/centering-in-the-unknown