Question

所有

这似乎与Firefox有关（没有尝试过Opera和IE）。

我有'ul'儿童，在液体布局中宽度为100％。父'li'本身的宽度为其父'ul'的33％。

Chrome似乎正确显示了子'ul'的宽度，即其100％等于其父'li'宽度为33％。但是，Firefox会将'ul'子宽度拉伸到整个视口宽度。

            <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

CSS - 子项不继承液体布局中父项的宽度

1 个答案: