CSS - дочерний элемент, не наследующий ширину родительского элемента в жидком макете - PullRequest
Новая
       21

CSS - дочерний элемент, не наследующий ширину родительского элемента в жидком макете

1 голос
/ 13 февраля 2012

All

Похоже, что это проблема, связанная с Firefox (еще не пробовал Opera & IE).

У меня есть дети 'ul', которые имеют ширину 100% в макете жидкости. Родитель 'li' сам по себе имеет ширину 33% от родительского 'ul'.

Похоже, что 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;
                }

1 Ответ

2 голосов
/ 13 февраля 2012

Проблема, кажется, с display: table-cell.Я попытался заменить это на display: inline-block; и float: left;, и подменю начало работать с обоими.

Я также рекомендовал бы взглянуть на эту статью для вертикального центрирования, используя inline-block: http://css-tricks.com/centering-in-the-unknown

...