Позиция относительная не работает с табличной таблицей дисплея?

Я создал горизонтальное меню, состоящее из кнопок. Мне нужны эти кнопки для изменения размера в ширину, чтобы вместе они занимали 100% ширины контейнера меню. Он должен действовать так же, как TD делает внутри ТАБЛИЦЫ.

Как таковой, здесь код, который я придумал:

<div id="menubar">
    <div id="menu">
        <div class="button">
            <Button>Button 1</Button>
        </div>
        <div class="button">
            <Button>Button 2</Button>
        </div>
        <div class="button">
            <Button>Button 3</Button>
        </div>
        <div class="button">
            <Button>Button 4</Button>
        </div>
    </div>
</div>

и мой CSS:

#menubar {
    width: 100%;
    height: 100%;
    display: table;
    table-layout: fixed;
}

#menu {
    display: table-row;
}

#menu .button {
    position: relative;
    display: table-cell;
}

#menu .button Button {
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;
}

Это отлично работает в каждом браузере, кроме Mozilla. Mozilla, похоже, не уважает относительное положение класса кнопок и, как таковые, все кнопки расположены абсолютно друг на друга (а не абсолютно внутри DIV с классом "button").

После некоторых дальнейших исследований кажется, что это известная проблема, когда Mozilla не соответствует позиции "relative", когда на дисплее установлено "table-cell".

Кто-нибудь знает работу, чтобы добиться того, что я ищу?

Примечание. Меню динамическое, поэтому я не знаю, сколько кнопок будет, поэтому я не могу предоставить процентную ширину для каждой кнопки.

Ответ 1

Удалите правое, нижнее, верхнее и левое положение из #menu .button Button

Для экземпляра

#menu .button Button {
    position: absolute;
    /*right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;*/
}

Вот РАБОЧИЙ ДЕМО

Если вам требуется чистое решение display:table-cell;, вам просто нужно удалить positioning

Для экземпляра

#menubar {
    width: 100%;
    height: 100%;
    display: table;
    table-layout: fixed;
}
#menu {
    display: table-row;
}
#menu .button {

    display: table-cell;
}
#menu .button Button {

    right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;
}

Вот РАБОЧИЙ ДЕМО-2

ИЗМЕНИТЬ

Чтобы растянуть кнопки, чтобы занять ширину, вот решение.

Код:

#menu .button Button {
    width: 100%;
}

Вот РАБОЧИЙ ДЕМО-3

EDIT - 2

В соответствии с запросом OP подразумевается условие добавления высоты к кнопкам, вот решение для этого. Добавление height:100%; является вкладом OP в это решение.

#menu .button Button {
    display:table-cell;
    width: 100%;
    height:100%;
}

Вот РАБОЧИЙ ДЕМО-4

Ответ 2

Использование позиции: относительная в ячейке таблицы не определена

Спецификация CSS в W3.org говорит, что эффект position: relative составляет undefined для элементов таблицы и других элементов таблицы.

Подробнее см. http://www.w3.org/TR/CSS21/visuren.html#choose-position.

В результате некоторые браузеры, похоже, позволяют ячейкам таблицы вести себя как блокирующий блок для любых абсолютно позиционированных дочерних элементов в ячейке таблицы (см. http://www.w3.org/TR/CSS21/visuren.html#comp-abspos для более подробно). Однако некоторые браузеры не пытаются расширить спецификацию и игнорировать position: relative при применении к ячейкам таблицы.

Вы видите нормальное поведение для совместимого браузера, но для поведения, не определенного спецификацией CSS, браузеры могут делать или не делать то, что им нравится, поэтому результаты будут отличаться.

Как работать вокруг этого

Что я делаю для этих ситуаций, я помещаю элемент оболочки уровня блока в ячейку с абсолютным позиционированием (я устанавливаю смещения так, чтобы обертка заполняла ячейку таблицы), а затем полностью позиционировала мои внутренние дочерние элементы относительно обертка.

Создание шкалы кнопок как по ширине, так и по высоте

Следующий CSS позволит элементу кнопки заполнить ширину и высоту ячейки таблицы:

body, html {
    height: 100%; /* if you want a to fil up the page height */
}
#menubar {
    width: 100%;
    height: 100%; /*or else fix this height... 100px for example */
    display: table;
    table-layout: fixed;
}
#menu {
    display: table-row;
}
#menu .button {
    display: table-cell;
    border: 1px dotted blue;
    height: 100%; /* scale the height with respect to the table */
}
#menu .button Button {
    width: 100%;
    height: 100%; /* scale the height with respect to the table cell */
}

Вам нужно установить высоту для #menubar, а затем убедитесь, что как ячейка таблицы, так и кнопка имеют height: 100% (подумайте о цепочке наследования, таблице к таблице-ячейке, а затем таблице-ячейке кнопка).

Fiddle: http://jsfiddle.net/audetwebdesign/7b9h9/